使用静态json文件作为源的jQuery UI自动完成
我使用的是jquery-ui-autocomplete (实际上，一个附加在搜索框上的catcomplete )。只要我使用一个静态定义的项数组作为源，它就工作得很好。
出于性能原因，我不希望自动完成将Ajax请求发送到PHP脚本，使%类似于对MySQL的%请求。因此，I从DB生成一个JSON文件，其中包含搜索中可以匹配的每一项(大约20-30项，来自许多表)。我希望在页面加载或用户开始键入搜索框时，只读取/解析文件一次。
我被困在这里了，我试图将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"}
]回答 2
Stack Overflow用户
发布于 2013-03-29 01:53:18
您的数据源正在抛出一个解析错误，因为json格式不是propper，在json中，键也必须包含在"中。
{
"list" : [{
"label" : "lbl1",
"category" : "cat1",
"desc" : "desc1"
}, {
"label" : "lbl2",
"category" : "cat1",
"desc" : "desc2"
}, {
"label" : "lbl3",
"category" : "cat1"
}]
}演示：Plunker
如果需要基于请求项的搜索，则必须进行更多的更改。
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
});演示：Plunker
Stack Overflow用户
发布于 2013-03-29 01:29:02
试着翻转它，所以在页面加载时，您可以抓取它一次，然后实例化自动完成。
$(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
});
}
});
});https://stackoverflow.com/questions/15695931
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号