jquery UI自動完成工作正常，但得到空白的結果

Question

我已經使用從http://jqueryui.com/autocomplete/#remote-jsonp jquery自動完成的例子。我已經包含了參考站點的所有特定代碼，但這在我的本地站點中不起作用。 我只想要在其中搜索公司名稱。

Here i am attaching image to get the exact idea what i am getting

<script> 
 
    $(function() { 
 
    function log(message) { 
 
     $("<div>").text(message).prependTo("#log"); 
 
     $("#log").scrollTop(0); 
 
    } 
 

 
    $("#company_name").autocomplete({ 
 
\t source: "http://localhost:5050/api/v1/web-customer-list", 
 
     type: "GET", 
 
     minLength: 1, 
 
     autoSelect: true, 
 
     autoFocus: true, 
 
     dataType : "json", 
 
     response: function(event, ui) { 
 
\t  var responseObj = ui.content[0]; 
 
      var companyNameList = [] ; 
 
      for(var i = 0 ; i<= 6 ; i ++){ 
 
       companyNameList.push(responseObj[i].company.company_name) ; 
 
      } 
 
     }, 
 

 
     select: function(event, ui) { 
 
      console.log(event); 
 
      console.log(ui); 
 
     log("Selected: " + ui.item.company.company_name + " aka " + ui.item.id); 
 
\t } 
 
    }); 
 
    }); 
 
    </script>

Answer 1

我已付出過的例子，並做了一些調整，以適應你出現什麼做的事情。

工作實例：https://jsfiddle.net/Twisty/0Lajrcfv/

HTML

<div class="ui-widget"> 
    <label for="companyName">Company Name: </label> 
    <input id="companyName"> 
</div> 

<div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
    Result: 
    <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> 
</div> 

jQuery的

$(function() { 
    function log(message) { 
    $("<div>").text(message).prependTo("#log"); 
    $("#log").scrollTop(0); 
    } 

    $("#companyName").autocomplete({ 
    source: function(req, resp) { 
     var companyNameList = []; 
     $.ajax({ 
     //url: "http://localhost:5050/api/v1/web-customer-list", 
     //type: "GET", 
     url: "/echo/json/", 
     type: "POST", 
     data: { 
      json: JSON.stringify({ 
      company: { 
       company_name: [ 
       "Apple", 
       "Google", 
       "IBM", 
       "HP", 
       "Yahoo!", 
       "AltaVista", 
       "Yelp", 
       "2600" 
       ] 
      } 
      }) 
     }, 
     dataType: "json", 
     success: function(respObj) { 
      for (var i = 0; i <= 6; i++) { 
      companyNameList.push({ 
       id: i, 
       value: respObj.company.company_name[i] 
      }); 
      } 
      resp(companyNameList); 
     } 
     }); 
    }, 
    minLength: 1, 
    autoSelect: true, 
    autoFocus: true, 
    select: function(event, ui) { 
     log("Selected: " + ui.item.value + " aka " + ui.item.id); 
    } 
    }); 
}); 

所以，你可以看到的例子中，source選項可以接受從響應一個字符串或回調函數。回調函數傳遞兩個參數，request和response。

回調得到兩個參數：

甲request對象，具有一個單一的術語屬性，它指的是當前值在文本輸入。例如，如果用戶在城市字段中輸入「新喲」，則自動完成詞將等於「新喲」。

A response回調，它需要一個參數：要建議給用戶的數據。這些數據應根據所提供的術語進行過濾，並且可以採用上述任何一種簡單本地數據格式。在請求期間提供自定義源回調以處理錯誤時，這很重要。即使遇到錯誤，您也必須始終調用響應回調。這可確保小部件始終具有正確的狀態。

根據你的代碼，看起來你不打算過濾clientside，你只要接受任何GET請求返回的前6位。所以在我的例子中，我們忽略了req.term。然後我們只關心收集結果，正確格式化，並將它們返回到resp()。

對於我的工作示例，我們POST的數據，所以它可以回顯作爲迴應。根據你的榜樣，你期待某些類型的對象，大致類似於：

[{ 
    company: { 
    company_name 
    } 
}] 

如果你希望你的版本工作，在那裏你通過GET調用的URL，返回的數據應該是：

對象數組與標籤和value屬性：[ { label: "Choice1", value: "value1" }, ... ]

例如：

[{ 
    label: "Apple", 
    value: 1 
}, 
{ 
    label: "Google", 
    value: 2 
}]; 

我希望這會有所幫助。