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

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

插件版本：jquery-ui-1.9.2.custom(密码：ecxq)

                或者去 jQuery UI 网站上的Download Builder（下载生成器）页面下载 jQuery UI 的副本。

前言:之前从未接触过autocomplete,之后想网上学习别人写的，也许插件版本不同网上各种写法都有，眼花缭乱，一个头两个大，因此想记录一下

实现如图所示效果:

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

html代码

<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

javascript代码

<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>

 

 

至此功能全部完成。