Javascript jQuery UI使用$.map函数自动完成缓存
我正在尝试使用jQueryUIAutoComplete实现缓存。 我正在使用jQuery1.4.4和UI1.8.6 以下是我使用的基本代码:Javascript jQuery UI使用$.map函数自动完成缓存,javascript,jquery-ui,caching,autocomplete,jquery-autocomplete,Javascript,Jquery Ui,Caching,Autocomplete,Jquery Autocomplete,我正在尝试使用jQueryUIAutoComplete实现缓存。 我正在使用jQuery1.4.4和UI1.8.6 以下是我使用的基本代码: $('#searchbox').autocomplete({ source: function(request, response) { if (xhr === lastXhr) { response( $.map(data, function(item) {
$('#searchbox').autocomplete({
source: function(request, response) {
if (xhr === lastXhr) {
response( $.map(data, function(item) {
return {
label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
value: item.NAME
};
}));
}
});
}
});
下面是我通过查看示例来尝试使缓存工作的步骤:
var cache = {},
lastXhr;
$('#searchbox').autocomplete({
source: function(request, response) {
var term = request.term;
if (term in cache) {
response($.map(cache[term], function(item) {
return {
label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
value: item.NAME
};
}));
}
lastXhr = $.getJSON( "getdata.php", request, function(data, status, xhr) {
cache[term] = $.map(data, function(item) {
return {
label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
value: item.NAME
};
});
if (xhr === lastXhr) {
response( $.map(data, function(item) {
return {
label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
value: item.NAME
};
}));
}
});
}
});
有人吗?下面是我使用
缓存实现jqueryui自动完成的工作示例。希望有帮助:
var cache = {};
$("#textbox").autocomplete({
source: function(request, response) {
if (request.term in cache) {
response($.map(cache[request.term].d, function(item) {
return { value: item.value, id: item.id }
}))
return;
}
$.ajax({
url: "/Services/AutoCompleteService.asmx/GetEmployees", /* I use a web service */
data: "{ 'term': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
cache[request.term] = data;
response($.map(data.d, function(item) {
return {
value: item.value,
id: item.id
}
}))
},
error: HandleAjaxError // custom method
});
},
minLength: 3,
select: function(event, ui) {
if (ui.item) {
formatAutoComplete(ui.item); // custom method
}
}
});
如果您现在还没有这样做,请获取。它是web开发的宝贵工具。您可以在此JavaScript上设置一个断点,看看会发生什么。问题在于我的缓存[term]中,当时我正试图将$.map函数放入其中,因为它不是必需的
cache[term] = $.map(data, function(item) {
return {
label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
value: item.NAME
};
});
这是我为那些仍有困难的人准备的最后一个剧本:
为了避免任何混乱,我还将所有选项都排除在外
var cache = {},
lastXhr;
$('#searchbox').autocomplete({
source: function(term, response) {
var term = term;
if (term in cache) {
response($.map(cache[term], function(item) {
return {
/*Format autocomplete to display name and job title, e.g., Smith, John, Web Developer*/
label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
/*Replace the searched value with the value selected.*/
value: item.NAME
};
}))
/*I happened to leave this out, which I think what one of the main cause my caching did not work.*/
return;
}
lastXhr = $.getJSON( "getdata.php", request, function(data, status, xhr) {
cache[term] = data;
if (xhr === lastXhr) {
response($.map(data, function(item) {
return {
label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
value: item.NAME
};
}));
}
});
}
});
这不是应该的。谢谢你,拉斐尔!我知道我做错了。没有萤火虫我活不下去!