使用静态json文件作为源的jQuery UI Autocomplete [英] jQuery UI Autocomplete using a static json file as source
问题描述
我正在使用 jquery-ui-autocomplete (实际上是一个 catcomplete 附加到搜索框).只要我使用静态定义的项目数组作为源,它就可以很好地工作.
I'm using jquery-ui-autocomplete (actually, a catcomplete attached to a search box). It works vey well as long as I use a static-defined array of items as source.
出于性能原因,我不希望自动完成功能将Ajax请求发送到对MySQL发出%like%请求的PHP脚本.因此,我从数据库生成了一个JSON文件,其中包含可以在搜索中匹配的所有项目(许多SQL表中约有20-30个项目).在页面加载时或用户开始在搜索框中键入内容时,我只想读取/解析文件一次.
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 file only once, as the page loads or when the user starts to type in the search box.
我被困在这里. 我试图将Ajax调用附加到.catcomplete()(下面的代码).我还尝试进行getJSON调用,并在其success()方法中创建.catcomplete. 两种方式均会以静默方式失败.
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.
我是JS/jQuery的新手,我已经很喜欢它,但是我有点迷茫.任何对有用文档的帮助/解决方案/指针都将不胜感激.
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.
非常感谢!
这里是HTML :(非常简单)
Here is the HTML : (real simple)
<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"}
]
推荐答案
由于json格式不正确,您的数据源将引发解析错误,在json中,密钥也必须包含在"
中.
Your datasource is throwing an parse error since the json format is not propper, in json the keys also have to be enclosed within "
.
{
"list" : [{
"label" : "lbl1",
"category" : "cat1",
"desc" : "desc1"
}, {
"label" : "lbl2",
"category" : "cat1",
"desc" : "desc2"
}, {
"label" : "lbl3",
"category" : "cat1"
}]
}
演示:柱塞
如果您希望基于请求字词进行搜索,那么您将不得不进行更多更改
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
});
演示:柱塞
这篇关于使用静态json文件作为源的jQuery UI Autocomplete的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!