我正在使用jquery-ui-autocomplete(实际上,附加到搜索框的catcomplete)。只要我使用静态定义的项目数组作为源,它就可以很好地工作。
出于性能原因,我不希望自动完成功能将 Ajax 请求发送到向 MySQL 发出 %like% 请求的 PHP 脚本。因此,我从数据库生成了一个 JSON 文件,其中包含可以在搜索中匹配的每个项目(大约 20-30 个项目,来自许多 SQL 表)。我只想在页面加载或用户开始在搜索框中键入内容时读取/解析文件一次。
我被困在这里了。 我尝试将 Ajax 调用附加到 .catcomplete() (代码如下)。我还尝试进行 getJSON 调用并在其 success() 方法中创建 .catcomplete 。 两种方法都会默默失败。
我对 JS/jQuery 有点陌生,我已经喜欢它了,但我有点迷失。任何有用文档的帮助/解决方案/指针将不胜感激。
非常感谢!
这是 HTML:(非常简单)
<form id="searchform" method="get" role="search">
<input id="searchfield" />
<input type="submit" name="go" value="go!" />
</form>
这是我的 JS 代码:
$( "#searchfield" ).catcomplete({
delay: 0,
source: function( request, response ) {
$.ajax({
url: "/path/to/cache.json",
dataType: "json",
data: {term: request.term},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.label,
category: item.category,
desc: item.desc
};
}));
}
});
},
minlength:0
});
示例 JSON 数据:
[
{ label: "lbl1", category: "cat1", desc: "desc1"},
{ label: "lbl2", category: "cat1", desc: "desc2"},
{ label: "lbl3", category: "cat1"}
]
最佳答案
尝试翻转它,以便在页面加载时捕获它一次,然后实例化自动完成。
$(function() {
$.ajax({
url: "/path/to/cache.json",
dataType: "json",
data: {term: request.term},
success: function(data) {
var cat_data = $.map(data, function(item) {
return {
label: item.label,
category: item.category,
desc: item.desc
};
});
$("#searchfield").catcomplete({
delay: 0,
source: cat_data,
minlength:0
});
}
});
});
关于json - 使用静态 json 文件作为源的 jQuery UI 自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15695931/