jQuery autoComplete插件-实现自动匹配
最近要做一个搜索功能，为了更好的实现搜索，我们使用jquery autoComplete 插件实现自动补全功能。
首先要使用jquery autoComplete就要先下载 jquery AutoComplete 相关的包,本例子需要三个jar包，如下图所示 ：
解决jquery不支持高版本的方法
例子是在 jquery 版本1.7.1 下使用的都没问题，但最近在我们的项目中jquery版本换成了 1.9 ，运行后发现不能实现自动补全功能了。后来在网上找了很多资料，才发现 juqery Autocomplete 插件依赖于jquery 1.2.6 到 jquery 1.8.3 的版本，对于jquery1.9 以上的版本不支持，1.9以上的版本去掉了 browser方法，所以要想在jquery1.9 版本以上继续使用 autocomplete 插件，通过实践我找到两种解决方法，这两种方法都可以用，具体如下：
1. 在autocomplete.js里面加代码
在autocomplete.js中，最上面增加 $.browser = navigator.userAgent; 即可. 如下图所示：
2. 利用 jquery 扩展性，创建一个 jquery-browser.js
可以利用的扩展性，创建一个高版本支持browser 的 JS，具体内容如下：
/* * jQuery Autocomplete plugin 1.1 * Revision: $Id: jquery-browser.js 15 2015-08-22 10:30:27Z joern.zaefferer $ */ jQuery.extend({ browser: function() { var rwebkit = /(webkit)\/([\w.]+)/, ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/, rmsie = /(msie) ([\w.]+)/, rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/, browser = {}, ua = window.navigator.userAgent, browserMatch = uaMatch(ua); if (browserMatch.browser) { browser[browserMatch.browser] = true; browser.version = browserMatch.version; } return { browser: browser }; }, }); function uaMatch(ua) { ua = ua.toLowerCase(); var match = rwebkit.exec(ua) || ropera.exec(ua) || rmsie.exec(ua) || ua.indexOf("compatible") < 0 && rmozilla.exec(ua) || []; return { browser : match[1] || "", version : match[2] || "0" }; }
本地json实现自动补全
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>自动补全功能</title> <script type="text/javascript" src="jquery-1.7.1.min.js" ></script> <script type="text/javascript" src="jquery.autocomplete.js"></script> <link rel="stylesheet" href="jquery.autocomplete.css" /> <script type="text/javascript"> //本地数据<数组> var data =["java","javaee","jquery","c++","css","html","htm5","bb","ejb","c#"]; //开始 $().ready(function () { $("#autoComplete").autocomplete(data, { minChars: 0, max: 5, autoFill: true, mustMatch: true, matchContains: true, formatItem: function (data, i, total) { return "<I>" + data[0] + "</I>"; }, formatMatch: function (data, i, total) { return data[0]; }, formatResult: function (data) { return data[0]; } }); }); //搜索数据 function onSearch() { var nickName =$("#autoComplete").val(); alert(nickName); } </script> </head> <body> <input type="text" id="autoComplete" placeHolder="请输入要搜索的内容!"/> <input type="button" name="btnSearch" onclick="onSearch();" value="搜索"/> </body> </html>
后台读取数据实现自动补全
1.一次加载、多次使用：(这种方式是直接把后台查询到的所有数据一次性返回到浏览器，如果数据量很大的话，容易造成浏览器的栈溢出)
一次性获取到所有的城市信息：<input type="text" name="" id="allCity" onclick="$(this).click();"/>
<input type="hidden" id="url_1" value='<c:url value="/"/>'/>
<script type="text/javascript">
// 获取到全部的城市信息
var url_ = $("#url_1").val();
$(function(){
$.ajax({
url: url_+"/queryAllCityInfo",
type: "post",
dataType: "json",
data:{},
success: function(e){
if(e.success){
$("#allCity").autocomplete(eval(e.data),{
max: 12, //列表里的条目数
minChars: 0, //自动完成激活之前填入的最小字符
width: 218, //提示的宽度，溢出隐藏
scrollHeight: 300, //提示的高度，溢出显示滚动条
matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill: false, //自动填充
formatItem: function(row, i, max) {
return row.name;
},
formatMatch: function(row, i, max) {
return row.name;
},
formatResult: function(row) {
return row.name;
}
}).result(function(event,item){
});
}
}
});
});
</script>
2.根据输入内容动态加载
前端js代码：
所处城市：<input type="text" name="searchStr" id="searchStr">
<input type="hidden" id="url_" value='<c:url value="/queryCityName"/>'/>
<script type="text/javascript">
var url = $("#url_").val();
// 实时的更新列表中的条目信息
$("#searchStr").autocomplete(url, {
max : 8, // 列表里的条目数
minChars : 0, // 自动完成激活之前填入的最小字符
width : 200, // 提示的宽度，溢出隐藏
matchContains : true, // 包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
autoFill : false, // 自动填充
cacheLength : 0, // 清除缓存
extraParams : {
searchStr : function() {
return $("#searchStr").val();
}
},
parse : function(data) {
var json = eval("("+data+")"); //一般返回的都是字符串，需要对其对象化
if (json.success) {
var parsed = [];
var rows = json.nameList;
for (var i = 0; i < rows.length; i++) {
var name = rows[i].split("|"); // 使用Jquery中的autoComplete插件实现自动匹配功能时，直接使用它来解析json对象时，会出现一个错误提示，
//因为它默认使用"/n"拆分行、"|"拆分字段。如果需要使用它来解析json对象，则需要自己实现其parse方法。
parsed[parsed.length] = {
data : name, //下拉框显示数据格式
value : name, //选定后实际数据格式
result : name //选定后输入框显示数据格式
};
}
return parsed;
}
}
}).result(function(event, item, data) { // 回调函数
// data->相当于 value的值
});
</script>
注：使用Jquery中的autoComplete插件实现自动匹配功能时，直接使用它来解析json对象时，会出现一个错误提示，因为它默认使用”/n”拆分行、”|”拆分字段。如果需要使用它来解析json对象，则需要自己实现其parse方法。
实例：
var data ; //定义数据 //开始 $.ajax({ url: "${ctx}/nhProviderAction.do?method=getSuggestStage", type:"post", data:{"cityCode":"1"}, success:function(result){ var obj = eval('(' + result + ')'); data = obj; autocompleteFn(data,".autoCom"); $('#loading').hide(); } }); //自动 补全方法 function autocompleteFn(data,obj) { $(obj).autocomplete(data, { minChars: 1,//在触发autoComplete前用户至少需要输入的字符数 //delay: 500,//击键后激活autoComplete的延迟时间(单位毫秒) max: 10,//autoComplete下拉显示项目的个数，Default: 10 //autoFill: true,//要不要在用户选择时自动将用户当前鼠标所在的值填入到input框，Default: false mustMatch: true,//如果设置为true，autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框，Default:false matchContains: true,//决定比较时是否要在字符串内部查看匹配，如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false formatItem: function (data, i, total) { return "<I>" + data.stageName + "</I>"; }, formatMatch: function (data, i, total) { return data.stageName; }, formatResult: function (data) { return data.stageName } }).result(function (event, data, formatted) {// 这个是当选择某项时触发的回调函数 if(data == undefined){ $(this).closest('tr').find('input[name="sportManagerId"]').val(''); return; } //显示对应的案场经理 $(this).closest('tr').find('input[name="sportManagerId"]').val(data.sportManagerNames); //放入stageid $(this).closest('tr').find('input[name="stageId"]').val(data.stageId); }); }
实例：
$('#stageName').autocomplete({
serviceUrl: '${ctx}/nhContractAction.do?method=getStageSuggest',
type : 'post',
dataType : 'json',
width: 200,
maxHeight: 250,
noCache: true,
transformResult: function(response) {
$('#stageId').val('');
$('#developerName').val('');
if (response==null || response=='') {
return {suggestions:[]};
}
return {
suggestions: $.map(response, function(d) {
return { value: d.stageName, data: d.id, developerName: d.developerName };
})
};
},
onSelect: function (suggestion) {
$('#stageId').val(suggestion.data);
$('#developerName').val(suggestion.developerName);
}
});
<input type="text" id="stageName" name="stageName" value="${nhContract.stageName}" class="validate[required,maxSize[50]]" />
划船不用桨、杨帆不等风、一生全靠浪
