无法将 Jquery-ui 自动完成链接到 JSON 文件

Posted 2023-05-08

【中文标题】无法将 Jquery-ui 自动完成链接到 JSON 文件

【英文标题】：Cannot link Jquery-ui autocomplete to JSON file

【发布时间】：2016-06-22 07:19:17

【问题描述】：

我知道这个问题以前被问过，但是通过查看其他主题，我仍然找不到解决问题的方法。

这里是相关的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 文件中所述的任何数据。

任何帮助将不胜感激，

谢谢

【问题讨论】：

为什么不只是 return data.brands; 在 response() 中？

第 53 行关闭 $(document).ready(); 错误。第 52 行应为：, 100);，第 53 行应为：);。

我在您的 html 中没有看到 ID 为 test 的元素。

【参考方案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。

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

【讨论】：

您好，感谢您到目前为止的帮助 - 您的代码看起来比我的要干净得多！当我在您的 plnkr 上搜索“dom”或 JSON 文件中包含的内容时，它仍然没有显示正确的结果吗？它只是继续返回未找到结果/其他品牌列表选项。

那么你需要大写搜索。 .indexOf() 区分大小写。如果您搜索“DOM”，它会立即出现。所以要么更新你的数据，要么转换使用request.term.toUpperCase();我喜欢漂亮的代码，如果你曾经在 Python 中工作，你必须正确格式化。所以我只是到处做。加上“整洁”功能有很大帮助；）

啊好吧！我现在一切正常，再次感谢您的回答，它解释得很好，似乎是一个非常复杂的解决方案！