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

我希望能帮助你解决这个问题。如果没有，评论或更新您的文章。