无法将 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

与我制作的其他 cmets 一起，我在 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。

我希望这有助于为您解决这个问题。如果没有，请评论或更新您的帖子。