本文详细介绍了如何实现基于静态数据和远程数据的自动完成功能，包括数据源处理、缓存机制及AJAX请求的运用。
1.对于静态数据测试
$( function()
{
//测试数据
var fastcity
= [
{
value: "nj nanjing 南京" ,
desc: "南京"
},{
value: "bi beijing 北京" ,
desc: "北京" ,
}
];
$( "#birds" ).autocomplete({
source: fastcity,
minLength: 1,
focus: function(event,
ui) {
$( this).val(ui.item.desc);
return false;
},
select: function(event,
ui) {
$( this).val(ui.item.desc);
return false;
}
}).data( "autocomplete")._renderItem
= function(ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete" ,
item)
.append( "<a>"+
item.desc + "</a>")
.appendTo(ul);
}
});
2.远程数据测试
$( function()
{
var cache
= {}; //缓存
$( "#birds").autocomplete({
minLength: 1,
source: function(request,
response) {
var term
= request.term;
if (term in cache
) { //缓存处理
response($.map(cache[term], function(item)
{
return {
value: item.desc,
desc: item.name
};
}));
return;
}
//获取数据来源
var url
= $("#webAppName" ).val()+"/project/add/autoComplete" ;
$.ajax({
url: url,
type: "POST",
dataType: "json",
data:{
searchItem: request.term
},
success: function(data)
{
console.log(data);
cache[term] = data;
response($.map(data, function(item)
{
return {
value: item.desc,
desc: item.name
};
}));
}
});
},
focus: function(event,
ui) {
$( this).val(ui.item.desc);
return false;
},
select: function(event,
ui) {
$( this).val(ui.item.desc);
return false;
}
}).data( "autocomplete")._renderItem
= function(ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete" ,
item)
.append( "<a>"+
item.desc + "</a>")
.appendTo(ul);
};
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
