jquery-ui autocomplete 结合ajax实现自动完成搜索框匹配

首先我们需要在html代码中引入jquery文件，然后引入jquery-ui的js文件和css文件

<link rel="stylesheet" href="css/base/jquery-ui-1.9.2.custom.css" /> 
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>

这里有一点要注意的地方:

导入的jquery版本不能低于1.6，只有jquery1.6以上才支持此版本的autocomplete

下面在html页面定义一个带id的input标签

<input type="text" id="queryname" name="queryname" />  

        <input type="text" id="queryid" name="queryid" /> 

在下就不用静态数据举例了（在下给的第一个下载连接里面有个Demo就是用的最简单的静态数组做的，各位如果不懂的话可以看一下），

直接结合ajax了ha

<script type="text/javascript">
 
$("#queryname").autocomplete({
source : function(request, response) {
// request对象只有一个term属性，对应用户输入的文本
// response在你自行处理并获取数据后，将JSON数据交给该函数处理，以便于autocomplete根据数据显示列表
$.ajax({
url : "MailAction.do?method=autocompleteUser",
type : "post",
dataType : "json",
data : {
"query" : request.term   // 获取输入框内容
},
success : function(data) {
response($.map(data, function(item) { // 此处是将返回数据转换为 JSON对象
return {
label : item.label, // 下拉项显示内容
value : item.value  // 下拉项对应数值
//另外可以自定义其它参数
    }
}));
}
});
},
select : function(event, ui) { //event参数是事件对象，ui对象只有一个item属性，对应数据源中被选中的对象
$("#queryname").val(ui.item.label);  
                        $("#queryid").val(ui.item.value);  
                            return false;
                        }
            });
</script>

java代码就不贴了，后台返回一个JSONArray的json数组（如[ {"label"："你很皮","value"："1"}，{"label"："略皮略皮","value"："2"}  ]）或者字符串数组如（["a","b","c"]）等等都行，根据需求而定。

另外列几种开发中可能出现的问题(因为这些问题在下TM都遇到过):

1.autocomplete的下拉列表可能被其它组件遮住，那是因为autocomplete的z-index值太小，在下在网上看到的解决问题方法是写个css样式  .ui-autocomplete{ z-index: 9999; }结果试了一下没有效果，后来才发现该autocomplete版本的z-index是写在行内的（发现真相的我眼泪掉下来），将样式改为.ui-autocomplete{ z-index: 9999 !important; }就解决了。

2.如果页面中也用到了EasyUI插件的，需要将autocomplete文件放在EasyUI之后，原因:autocomplete 自动把依赖的menu模块加入进来,而EasyUI也有自己的menu，然后它们两个模板就开始打架了，导入文件顺序如下：

<link rel="stylesheet" href="${basepath}/pages/newmail/jquery-ui-1.9.2.custom/css/base/jquery-ui-1.9.2.custom.css" /> 
<script type="text/javascript" src="${basepath}/webresource/js/jquery-1.12.4.min.js"></script> 
<script type="text/javascript" src="${basepath}/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${basepath}/js/easyui/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="${basepath}/js/easyui/jquery.calendar.js"></script>
<script type="text/javascript" src="${basepath}/pages/newmail/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.js"></script>

打赏

感谢支持与鼓励～