下载jquery autocomplete
<script type="text/javascript" src="${webRoot}/js/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="${webRoot}/css/jquery.autocomplete.css" />
<script type='text/javascript' src='${webRoot}/js/jquery.autocomplete.js'></script>
页面使用
$("#nameinfo").focus().autocomplete("${webRoot}/XXX.do", {
minChars:1,
width: 310,
autoFill: false,
dataType:'json',
mustMatchPro:'id',//填写缓存想要匹配的属性名称,这个是自定义的
extraParams:{sizeOfPage:50},//额外附加参数
parse:function(data){//返回结果集解析
var list=data.objects;
var arrayHtml = [];
if(null!=list&&list.length>0){
for(var i=0;i<list.length;i++){
var arrvalue={
id:list[i].id,
name:list[i].name,
showItem:list[i].showItem
};
arrayHtml.push(arrvalue);
}
}
//解析结果集
return $.map(arrayHtml, function(row) {
return {
data : row,//返回的行对象
value : row,
result :row.id//选中的结果
}
});
},//解析数据
formatItem: function(row, i, max) {
return row.showItem;
},
formatResult: function(item) {
return item.id;
}
}).result(function(e, item) {
//获取返回值
//alert(item.id);
});
当使用matchSubset:true时出现异常 s.toLowerCase();
出问题的地方
function matchSubset(s, sub) {
if (!options.matchCase) s = s.toLowerCase();
//当前获得匹配项是json数组而不是字符串所以不支持这个方法
解决办法,修改jquery.autocomplete.js,添加一个属性mustMatchPro
$.Autocompleter.defaults = {
inputClass: "ac_input",
resultsClass: "ac_results",
loadingClass: "ac_loading",
minChars: 1,
delay: 400,
matchCase: false,
matchSubset: true,
[b] mustMatchPro:'id',[/b]
matchContains: false,
cacheLength: 10,
max: 100,
mustMatch: false,
extraParams: {},
selectFirst: true,
formatItem: function(row) { return row[0]; },
formatMatch: null,
autoFill: false,
width: 0,
multiple: false,
multipleSeparator: ", ",
highlight: function(value, term) {
return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
},
scroll: true,
scrollHeight: 180
};
function matchSubset(s, sub) {
if (!options.matchCase) {
try{
s = s.toLowerCase();
}catch(e){
s=s[options.mustMatchPro].toLowerCase();
}
}
var i = s.indexOf(sub);
if (options.matchContains == "word"){
i = s.toLowerCase().search("\\b" + sub.toLowerCase());
}
if (i == -1) return false;
return i == 0 || options.matchContains;
};
分享到:
相关推荐
jquery autocomplete下载.rar
Jquery AutoComplete
Jquery autocomplete插件使用
jquery.autocomplete.js 、jquery.autocomplete.css
JQuery autocomplete ajax分页,对源码稍微修改了下
在输入页面利用JQuery获取用户输入,然后通过AJAX异步发送到处理页面,...若是jquery autoComplete组件则只要将从后台获取的数据放入autocomplete( url or data, [options] )第一个参数中就行,第二个参数可加可不加。
jquery-autocomplete搜索框自动完成的中文文档,上手快,轻便,功能强大
jquery autocomplete 动态补全例子支持中文 ajax传递json数据 文件里有json数据拼接
jquery-autocomplete 可用
jQuery Autocomplete,百度搜索框提示效果。
jquery autocomplete 所需js文件及样式。 实现仿百度输入查询下拉功能。
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
使用Jquery AutoComplete 插件来做自动填充功能,包含本地数组,后台数据等情况
jquery autocomplete.js 是一款优秀的开源JS,支持自动完成,不过如果是中文失效。原因是由于中文编码不一致引起的,修改源文件中AJAX请求中的编码,加上escape编码后,在后台用Server.URLDecode解码后,则中文也...
jquery自动补全插件(jquery autocomplete) 内包含使用说明,前台+后台
NULL 博文链接:https://zhaoaiqing.iteye.com/blog/333869
jquery autocomplete官方版(源代码+示例) 自动补充功能非常实用
jQuery autocomplete 自动加载
demo,可直接运行查看效果,实现的效果是:在输入框中输入汉字时触发keyup事件,即自动出现多个选项,选中某选项时自动将该选项值和所需属性填充到指定输入框中。
包含jquery.autocomplete相关js文档