使用静态json文件作为源的jQuery UI自动完成

Question

我正在使用jquery-ui-autocomplete(实际上,一个catcomplete附加到搜索框).只要我使用静态定义的项目数组作为源,它就可以很好地工作.

出于性能原因,我不希望自动完成功能将Ajax请求发送到PHP脚本,这样就可以向MySQL发送%like请求.所以,我从DB生成了一个JSON文件,其中包含了搜索中可以匹配的每个项目(大约20-30项,来自许多sql表).当页面加载或用户开始在搜索框中输入时,我只想读取/解析文件一次.

我被困在这里 我试图将Ajax调用附加到.catcomplete()(下面的代码).我还尝试进行getJSON调用并在其success()方法中创建.catcomplete. 两种方式都无声地失败.

我是JS/jQuery的新手,我已经喜欢它了,但我有点失落.任何有用的doc的帮助/解决方案/指针都将非常感激.

非常感谢你!

这是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"}
]

Answer 1

尝试翻转它,所以在页面加载时你抓住它一次,然后实例化自动完成.

$(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
            });
        }
    });
});

Answer 2

你的数据源抛出一个解析错误,因为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