使用静态 json 文件作为源的 jQuery UI 自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15695931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Autocomplete using a static json file as source
提问by Didier Sampaolo
I'm using jquery-ui-autocomplete(actually, a catcompleteattached to a search box). It works vey well as long as I use a static-defined array of items as source.
我正在使用jquery-ui-autocomplete（实际上是一个附加到搜索框的catcomplete）。只要我使用静态定义的项目数组作为源，它就可以很好地工作。
For performance reasons, I don't want the autocomplete to send Ajax requests to a PHP script making %like% requests to MySQL. So, I generated a JSON file from the DB, containing every item that can be matched in the search (about 20-30 items, from many sql tables). I'd like to read/parse the fileonly once, as the page loads or when the user starts to type in the search box.
出于性能原因，我不希望自动完成功能将 Ajax 请求发送到向 MySQL 发出 %like% 请求的 PHP 脚本。因此，我从 DB 生成了一个 JSON 文件，其中包含可以在搜索中匹配的每个项目（大约 20-30 个项目，来自许多 sql 表）。我只想在页面加载或用户开始在搜索框中键入时读取/解析文件一次。
I'm stuck here.I tried to attach an Ajax call to the .catcomplete() (code below). I also tried to make a getJSON call and create the .catcomplete in its success() method. Both ways fail silently.
我被困在这里。我试图将 Ajax 调用附加到 .catcomplete()（下面的代码）。我还尝试进行 getJSON 调用并在其 success() 方法中创建 .catcomplete 。 两种方式都默默地失败了。
I'm kind of new to JS/jQuery stuff, I already like it, but I'm a bit lost. Any help/solution/pointer to usefull doc would be greatly appreciated.
我是 JS/jQuery 的新手，我已经喜欢它了，但我有点迷茫。任何有用的文档的帮助/解决方案/指针将不胜感激。
Thank you very much!
非常感谢！
Here is the HTML : (real simple)
这是 HTML :( 真的很简单）
<form id="searchform" method="get" role="search">
<input id="searchfield" />
<input type="submit" name="go" value="go!" />
</form>
Here is my JS code :
这是我的 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
});
Sample JSON data:
示例 JSON 数据：
[
{ label: "lbl1", category: "cat1", desc: "desc1"},
{ label: "lbl2", category: "cat1", desc: "desc2"},
{ label: "lbl3", category: "cat1"}
]
回答by Frambot
Try flipping it around, so on page-load you grab it once, then instantiate the autocomplete.
尝试翻转它，以便在页面加载时抓取一次，然后实例化自动完成。
$(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
});
}
});
});
回答by Arun P Johny
Your datasource is throwing an parse error since the json format is not propper, in json the keys also have to be enclosed within ".
您的数据源引发解析错误，因为 json 格式不正确，在 json 中，键也必须包含在".
{
"list" : [{
"label" : "lbl1",
"category" : "cat1",
"desc" : "desc1"
}, {
"label" : "lbl2",
"category" : "cat1",
"desc" : "desc2"
}, {
"label" : "lbl3",
"category" : "cat1"
}]
}
Demo: Plunker
演示：Plunker
If you want the request term based searches, then you will have to make some more changes
如果您想要基于请求词的搜索，那么您将不得不进行更多更改
var xhr;
$( "input" ).catcomplete({
delay: 0,
source: function( request, response ) {
var regex = new RegExp(request.term, 'i');
if(xhr){
xhr.abort();
}
xhr = $.ajax({
url: "data.json",
dataType: "json",
cache: false,
success: function(data) {
response($.map(data.list, function(item) {
if(regex.test(item.label)){
return {
label: item.label,
category: item.category,
desc: item.desc
};
}
}));
}
});
},
minlength:0
});
Demo: Plunker
演示：Plunker
