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

我使用的是jqueryui自动完成（实际上，一个catcomplete附加到搜索框）。只要我使用静态定义的项数组作为源，它就工作得很好

出于性能原因，我不希望autocomplete向PHP脚本发送Ajax请求，向MySQL发出%like%的请求。因此，我从DB生成了一个JSON文件，其中包含搜索中可以匹配的每个项目（大约20-30个项目，来自许多sql表）。我只想在页面加载时或用户开始在搜索框中键入时，读取/解析文件一次

我被困在这里了。 我尝试将Ajax调用附加到.catcomplete（）（下面的代码）。我还尝试调用getJSON并在其success（）方法中创建.catcomplete。 两种方法都会以静默方式失败。

我对JS/jQuery有些陌生，我已经喜欢它了，但是我有点迷路了。如有任何帮助/解决方案/指向有用文档的指针，将不胜感激

多谢各位

下面是HTML：（非常简单）

示例JSON数据：

[
{ label: "lbl1", category: "cat1", desc: "desc1"}, 
{ label: "lbl2", category: "cat1", desc: "desc2"}, 
{ label: "lbl3", category: "cat1"}
]

---

尝试将其翻转，以便在页面加载时抓取一次，然后实例化自动完成

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

---

您的数据源抛出了一个解析错误，因为json格式不是propper，在json中，键也必须包含在

“

中

演示：

如果需要基于请求项的搜索，则必须进行更多更改

  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文件有一个问题（属性名称周围缺少“”），这个语法帮助我指出了这一点。一切都很好。再次感谢！很棒的提示，特别是对于更大的JSON文件！@joe frambach我们可以用这个语法使用limit吗？比方说每次我需要最多10个结果吗？实际上，我在_renderItemData上使用monkeypatch跳过了regexp部分（似乎只涉及匹配项）。我将你的答案标记为最佳答案，因为我真正的问题是JSON文件中的引号。非常感谢你指出这一点！

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

{
  "list" : [{
                "label" : "lbl1",
                "category" : "cat1",
                "desc" : "desc1"
            }, {
                "label" : "lbl2",
                "category" : "cat1",
                "desc" : "desc2"
            }, {
                "label" : "lbl3",
                "category" : "cat1"
            }]
}

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