2 yylxid YYlxid 于 2014.12.11 10:45 提问

jQuery autocomplete 输入一个字符会显示所有数据,输入两个字符后进行过滤 15C

输入第一个字符 匹配的会加粗,但是不匹配的也会显示
输入第二个字符后,不匹配的才会被过滤

使用的是jquery.autocomplete.js
使用 外部json数据

$("#Test").autocomplete("json/test.json", {

width:150,

max:10,

dataType: 'json',
minChars: 1, //自动完成激活之前填入的最小字符
autoFill: false, //自动填充
minLengthType:2,
//加入对返回的json对象进行解析函数,函数返回一个数组

parse:function(data){
var rows=[];
for(var i=0;i<data.length;i++){
rows[rows.length]= {
data:data[i].label,
value:data[i].label,
result:data[i].label
};
}
for(var i=0;i<data.length;i++){
//alert(rows[i].data);
}
return rows;
},
formatItem:function(row,i,n){
alert("yes"+row+i);
return row;
},
formatMatch: function(data, i, total) {
//alert("yes"+data);
return data;
},formatResult: function(row){
// alert("yes"+row);
return row;//要显示在文本框的子字段;

}

});

数据
[
{"label" : "Aragorn"},
{"label" : "Arwen"},
{"label" : "Bilbo Baggins"},
{"label" : "Boromir"},
{"label" : "Frodo Baggins"},
{"label" : "Gandalf"},
{"label" : "Gimli"},
{"label" : "Gollum"},
{"label" : "Legolas"},
{"label" : "Meriadoc Merry Brandybuck"},
{"label" : "Peregrin Pippin Took"},
{"label" : "Samwise Gamgee"}
]

4个回答

YYlxid
YYlxid   2014.12.11 10:49

dd
dd

guwei4037
guwei4037   Ds   Rxr 2014.12.11 11:03
showbo
showbo   Ds   Rxr 2014.12.11 11:50

test.json是静态文件吧?那样就是返回多少数据就显示多少数据了。一般是动态页依据输入的关键字过滤后输出匹配的。

楼主应该先用jquery的ajax下载这个json文件数据后,使用客户端的数据来匹配,而不是每次从服务器下载

这个autocomplete是哪个写的?不是jqueryui的,自己找API来看客户端数据自动完成是怎样配置的

 $.getJSON("json/test.json",function(data){
//将data处理成需要格式后再初始化autocomplete,自己找相关API来看
$("#Test").autocomplete(data,{..配置.});
});
YYlxid
YYlxid 回复showbo: 恩 我修改了 用ajax获取action返回的json数据 但是也是一样 可以触发事件 但是不匹配
3 年多之前 回复
showbo
showbo 回复YYlxid: 不是这个插件吧。。API里面的使用说明不是这样配置配置的。jqueryui的应该是$('#xxx').autocomplete({source:数据源url地址或者数组}),API:http://api.jqueryui.com/autocomplete/#option-source
3 年多之前 回复
YYlxid
YYlxid 回复showbo: //code.jquery.com/ui/1.11.2/jquery-ui.js
3 年多之前 回复
showbo
showbo 回复YYlxid: 你去哪下的这个插件?发地址来看看。。配置url一般都是从服务器下载的
3 年多之前 回复
YYlxid
YYlxid 回复showbo: 是输入一个字符,返回了所有的数据,但是如果输入两个以上 的字符 就会过滤出匹配的数据,这也算过滤吧。。。。。。我先试试用ajax吧。谢谢
3 年多之前 回复
YYlxid
YYlxid 回复Hjupan: 缓存?有没有其他办法呀?
3 年多之前 回复
Hjupan
Hjupan 如果服务器的数据太大,一次下载估计会影响性能。
3 年多之前 回复
showbo
showbo 如这个自己写代码控制数据过滤,不过没意义,楼主还是自己看下这个插件客户端数据如何配置的,先ajax获取数据后再初始化autocomplete。parse:function(data){var rows=[],s=$('#Test').val();for(var i=0;i<data.length;i++){if(data[i].label.indexOf(s)!=-1)rows[rows.length]={data:data[i].label,value:data[i].label,result:data[i].label}}return rows}
3 年多之前 回复
showbo
showbo 回复YYlxid: 你配置的数据是字符串地址,这个插件会自动请求url获取数据,本地数据一般是数组对象什么的,不需要请求服务器。请求服务器的话过滤操作要通过动态页来做,这个插件不会对返回的数据进行过滤的。不过看这个插件有parse配置返回需要的数据,你可以自己写代码依据输入的内容过滤后在返回需要的结果
3 年多之前 回复
YYlxid
YYlxid 可是使用页面内的数据应该也算静态的数据吧 为什么那个就可以呢?
3 年多之前 回复
YYlxid
YYlxid   2014.12.13 14:15

$("#queryCon").autocomplete({
select:function(event,ui){
alert(ui);
},
source:function(request,response){
$.ajax({
type:"post",
url:"loginJson.do",
dataType:"json",
success:function(data){
response($.map(data.result,function(item){
//alert(item.usr);
return {
label:item.usr,
value:item.pwd

                    };
                    }));
                //alert("yes");
                //alert(data.password);
                //var n=data.length;
                /* for(var i=0;i<n;i++){
                    alert(data.result[i].usr);
                } */
            }
        });
    }
});
YYlxid
YYlxid 回复showbo: 大神,给个qq吧~~
3 年多之前 回复
YYlxid
YYlxid 回复showbo: 我查询到json数据了,而且把对应的要匹配的给了 label 和value,数据可以返回显示,但是不匹配
3 年多之前 回复
showbo
showbo 直接陪配置source为你的URL地址就好了吧,自己修改do的代码返回符合插件的数据格式。配置为function还需要自己写过滤,或者要将request.term作为ajax的参数data传给动态页过滤数据,然后再将数据回传给response回调。发的api地址最后有示例。
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!