無法將Jquery-ui自動完成連接到JSON文件

我意識到這個問題之前已經被問過，但是從其他主題來看，我仍然無法找到解決我的問題的方法。無法將Jquery-ui自動完成連接到JSON文件

這裏是相關的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文件規定的數據。

任何幫助將非常感激，

感謝

來源

2016-03-08 alexc

爲什麼不僅僅是'return data.brands;'in response（）？ – Twisty

你的'$（document）.ready（）;'在第53行上的結尾是錯誤的。第52行應該是：'}，100）;'和第53行應該是：'}）;'。 – Twisty

我在您的HTML中看不到具有'test'作爲ID的元素。 – Twisty

隨着我提出的其他意見，我作出的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。

我希望能幫助你解決這個問題。如果沒有，評論或更新您的文章。

來源

2016-03-08 18:23:55 Twisty

分叉你的掠奪者：https://plnkr.co/edit/SBr6wbXF33q3nVcek3Px?p=preview – Twisty

嗨，感謝您的幫助，迄今爲止 - 您的代碼看起來比我的更乾淨！當我把'dom'或者包含在你的plnkr上的JSON文件中的東西放進去時，它仍然不顯示正確的結果呢？它只是繼續返回未找到結果/其他品牌列表選項。 – alexc

然後你需要大寫的搜索。 '.indexOf（）'區分大小寫。如果您搜索「DOM」，它會立刻起來。所以要麼更新你的數據，要麼使用'request.term.toUpperCase（）;'我喜歡漂亮的代碼，如果你使用Python，你必須正確格式化。所以我只是到處去做。加上'整潔'功能幫助很大;） – Twisty

無法將Jquery-ui自動完成連接到JSON文件

回答

相關問題