使用静态JSON文件作为来源的jQuery UI自动完成功能

Question

我正在使用`jquery-ui-autocomplete`（实际上是附加到搜索框的`catcomplete`）。只要我使用静态定义的项目数组作为源，它就可以很好地工作。

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

我卡在这里了。我尝试将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"}
]

- Didier Sampaolo

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

- Joe Frambach

---

这个答案对我很有帮助（非常感谢）。实际上，我遇到了JSON文件的问题（属性名称周围缺少""...），这个语法帮助我指出了这一点。一切都运行正常。再次感谢！ - Didier Sampaolo

非常好的技巧，特别适用于较大的JSON文件！ - Iladarsda

@joe-frambach，我们能在这个语法中使用 limit 吗？比如说我每次需要最多10个结果？ - huzeyfe

Answer 2

您的数据源出现了解析错误，因为json格式不正确，在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
  });

Demo: Plunker

- Arun P Johny

---

实际上，我成功地通过在_renderItemData上进行monkeypatch来跳过regexp部分（似乎只涉及匹配项）。我将您的答案标记为最佳答案，因为我的真正问题是JSON文件中的引号。非常感谢您指出这一点！ - Didier Sampaolo