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);
};
});