无法 link Jquery-ui 自动完成 JSON 文件

Question

我意识到这个问题以前有人问过，但是通过浏览其他主题我仍然找不到解决我问题的方法。

这里是相关的JS代码+问题的plunk；

    $('#test').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "brands.json",
                    dataType: 'json',
                    data: request,
                    success: function(data) {
                        response($.map(data, function(item) {
                            return (item.brands)
                        }));
                    }
                });
            },

笨蛋：

https://plnkr.co/edit/qEZnuszj7JkNy1NrGyCd?p=preview

如您所见，我无法检索 .JSON 文件中所述的任何数据。

任何帮助将不胜感激，

谢谢

Answer 1

连同我所做的其他评论，我在 JSFiddle 中做了一个工作示例：https://jsfiddle.net/Twisty/xp43u291/

HTML

<input name="myList" id="test">
<span id="#message"></span>

JavaScript

$(document).ready(function() {
  setTimeout(function() {
    $('#test').autocomplete({
      source: function(request, response) {
        $.ajax({
          url: "brands.json",
          dataType: "JSON",
          type: "GET",
          success: function(resp) {
            console.log("Find '", request.term, "' in ", resp.brands);
            var results = [];
            $.each(resp.brands, function(k, v) {
              if (v.indexOf(request.term) == 0) {
                results.push(v);
              }
            });
            response(results);
          }
        });
      },
      autoFocus: true,
      minLength: 3,
      response: function(event, ui) {
        if (!ui.content.length) {
          var noResult = {
            value: "",
            label: "No results found"
          };
          ui.content.push(noResult);
        } else {
          $("#message").empty();
        }
      }
    });

    var render = $('#test').autocomplete('instance')._renderMenu;
    $('#test').autocomplete('instance')._renderMenu = function(ul, items) {
      items.push({
        label: 'OTHER BRAND',
        value: 'OTHER BRAND',
        last: true
      });
      render.call(this, ul, items);
    };
  }, 100);
});

首先，您不想使用 $(document).ready(); 和 $(function(){});。使用其中之一。

其次，由于您调用的是 JSON 文件而不是脚本，因此没有任何内容可传递给文件本身。所以我们去掉data选项。

第三，在 success，我们期望 JSON 数据作为对象返回。 IT 将返回所有数据，我们希望将其配对以仅匹配我们的 request.term 或已输入的字符串的结果。您可以通过多种方式做到这一点，我使用 .indexOf() 进行了一个简单的循环。如果您希望它在整个短语而不是开头搜索，您也可以将其从 ==0 更改为 >=0。

希望对您解决这个问题有所帮助。如果不是，请评论或更新您的 post.

无法 link Jquery-ui 自动完成 JSON 文件

Cannot link Jquery-ui autocomplete to JSON file

jquery

json

jquery-ui

autocomplete

jquery-autocomplete