jquery-autocomplete 组件使用

最新推荐文章于 2025-03-13 19:23:53 发布

顾翰翔

最新推荐文章于 2025-03-13 19:23:53 发布

阅读量356

点赞数

分类专栏： jsp--js--html

本文链接：https://blog.youkuaiyun.com/u011563331/article/details/51323754

版权

jsp--js--html 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery的autocomplete组件来实现前端输入框的自动补全功能。通过设置`minChars`和`max`参数，以及定义`formatItem`和`result`回调函数，实现了从后台`auto/autoInvolvesSystem`接口获取数据并显示结果。同时，文中提及后台controller可以利用缓存机制提高查询效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要的js、css大概有这些

调用过程：

$(function() {
       var obj = $("#addInvolvesSystem");
       var url = GV.ctxPath + 'auto/autoInvolvesSystem';
       var param = {
           'addInvolvesSystem' : $("#addInvolvesSystem").val()
       };
       var jsonFun = {
           formatItem : formatItemFun,
           result : resultFun
       };
       var jsonParam = {
           minChars : 1,
           max : 10
       };
       autocompleteFun(obj, url, param, jsonFun,jsonParam );
    });

    function formatItemFun(row, i, max) {
       return row.name;
    }
    function resultFun(data) {
       $("#addInvolvesSystem").val(data.name);
       $("#involvesSystem").val(data.name);
    }


    $(function() {
        var obj = $("#involvesSystem");
        var url = GV.ctxPath + 'auto/autoInvolvesSystem';
        var param = {
            'involvesSystem' : $("#involvesSystem").val()
        };
        var jsonFun = {
            formatItem : formatItemFun,
            result : resultFun
        };
        var jsonParam = {
            minChars : 1,
            max : 10
        };
        autocompleteFun(obj, url, param, jsonFun,jsonParam );
     });