jquery.autocomplete.js使用-CSDN博客

本文链接：https://blog.csdn.net/qq_22889875/article/details/94599518

本文通过一个示例项目，详细介绍了如何使用 jQuery Autocomplete 插件来实现输入框的自动补全功能，包括前后端交互、JSON数据处理及自定义属性填充，适合初学者快速上手。

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

jquery.autocomplete.js使用

最近做项目用到了autocomplete，简单说下该插件使用方法和对应参数意义

本文主要做了个简单demo，实现的效果是：在输入框中输入汉字时触发keyup事件，即自动出现多个选项，选中某选项时自动将该选项值和所需属性填充到指定输入框中。扩展功能为：前端向后台发送ajax请求获取json对象，将json对象的某些属性填充到下拉框中实现类似百度搜索自动填充效果，项目中我所做的需求是：新增计费信息时，从后台连表取出计费类型值及其在某个表中对应的code值，页面需显示计费类型值及模糊搜索功能，保存时将对应code存入指定表中

1.使用jquery.autocomplete.js之前首先在页面导入如下文件：

<link rel="stylesheet" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js" charset="UTF-8"></script>

2、编写页面代码

<ul>
		<li>
			<label class="edited_item_190"><font color="red">*</font>费用类型：</label>
			<input id="add_cal_item_txt" style="width: 350px;" onkeyup="queryFeeCategory()">
			<input id="add_cal_item_code" style="width: 350px;" type="hidden">
		</li>
	</ul>

3、编写queryFeeCategory()方法，我是新建了autocomplete_test.js在里面添加的queryFeeCategory()方法，记得在页面将这个js引进去

var operatorList = [
					{"name":"商品包装","code":4},{"name":"胶卷消耗","code":3},
					{"name":"卷纸消耗","code":6},{"name":"收货商品检验","code":1},{"name":"胶带","code":8}
				   ];//operatorList可改为前端向后台发送ajax请求获取，如下注释代码，这里是方便示例
//var operatorList = [];//定义全局变量，这样只需发一次ajax请求获取数据
//function initFeeType(){
    //$.ajax({
        //data: {code: 'fee_special_item'},
        //url: mainDomain + "/sys/dict/dictList.action",
        //datatype: 'json',
        //success: function (result) {
             //operatorList = result;
       // }
   // })
//}
function queryFeeCategory() {
    $("#add_cal_item_txt").autocomplete(operatorList, {
        max: 30,
        minChars: 0,
        matchCase: false,
        matchContains: true,
        scroll: false,
        autoFill: false,
        parse : function(operatorList) {
            var rows = [];
            if (!$.isEmptyObject(operatorList)) {
                for(var i = 0;i < operatorList.length;i++) {
                    rows[i] = {
                        data : operatorList[i],
                        value : operatorList[i].name,
                        result : operatorList[i].name
                    };
                }
            } else {
                $("#add_cal_item_txt").val('');
                $("#add_cal_item_code").val('');
            }
            return rows;
        },
        formatItem: function (operatorList, i, total) {
            return operatorList.name;
        },
        formatMatch: function (operatorList, i, total) {
            return operatorList.name;
        },
        formatResult: function (operatorList) {
            return operatorList.name;
        }
    **}).result(function(event, data, formatted){
        $("#add_cal_item_code").val(data.code);//选中选项后获取选项对应的code
    });**
}

注意：上面用**标注的result方法是使用“.”操作符直接调用，而不是像formatResult等一样写法，我写代码的时候不小心写成了如下这样：

 ,result:function(event, data, formatted){
        $("#add_cal_item_code").val(data.code);//选中选项后获取选项对应的code
    }

这样写在选中选项后是没有任何效果的！！！我调试了好久才发现这个问题，太粗心了。

在浏览器中运行的效果如下：
输入不匹配的汉字后删除，会出现所有选项，输入有匹配的汉字后会出现模糊搜索匹配的所有选项

在这里插入图片描述

现在简单介绍下所用到的autocomplete的一些参数意义

max (Number):
autoComplete下拉显示项目的个数.Default: 10
minChars (Number):
在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表
mustMatch (Booolean):
如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false
matchContains (Boolean):
决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
scroll (Boolean):
当结果集大于默认高度时是否使用卷轴显示 Default: true
- autoFill (Boolean):
  要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false
formatItem (Function):
为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.
formatMatch (Function):
对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
formatResult (Function):
和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.
result (handler) Returns: jQuery
此事件会在用户选中某一项后触发，参数为：
event: 事件对象. event.type为result.
data: 选中的数据行.
formatted:formatResult函数返回的值
例如：
$("#add_cal_item_txt").result(function(event, data, formatted) {
$("#add_cal_item_code").val(data.code);//选中选项后获取选项对应的code
//如选中选项后给其他控件赋值，触发别的事件等等
});