使用静态json文件作为源的jQuery UI自动完成
我正在使用jquery-ui-autocomplete （实际上，一个catcomplete附加到搜索框）。 只要我使用静态定义的项目数组作为源，它就可以很好地工作。
出于性能原因，我不希望自动完成function将Ajax请求发送到PHP脚本，这样就可以向MySQL发送％like请求。 所以， 我从DB生成了一个JSON文件 ，其中包含了搜索中可以匹配的每个项目（大约20-30项，来自许多sql表）。 当页面加载或用户开始在搜索框中输入时，我只想读取/解析文件一次。
我被困在这里。 我试图将Ajax调用附加到.catcomplete（）（下面的代码）。 我还尝试进行getJSON调用并在其success（）方法中创建.catcomplete。 两种方式都无声地失败。
我是JS / jQuery的新手，我已经喜欢它，但我有点迷失了。 任何有用的doc的帮助/解决方案/指针都将非常感激。
非常感谢你！
这是HTML :(真正的简单）
这是我的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格式不是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
尝试翻转它，所以在页面加载时你抓住它一次，然后实例化自动完成。
$(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 }); } }); });