如何覆蓋jquery ui自動完成項目？

Question

我使用jQuery自動完成從GeoNames的城市加載到我的網頁上的文本框：

​​

而且我想重寫_renderItem以顯示我的自定義視圖自動完成的結果，但不會影響該方法到我的項目。我的代碼有什麼問題？你可以在jsfiddle.net/

Answer 1

找到實例我剛剛做了這個，我想設置文本框的「數據」。在我的情況下，我不想顯示任何「數據」。我在執行名爲data的地圖時只是「添加」了第三個值，並將其設置爲「item」，然後給出了「select」部分。見下文。

$(document).ready(function() { 
     var $birds = $("#birds") 
     $birds.focus(); 
     mURL = "my url here"; 
     $birds.autocomplete({ 
      minLength: 0, 
      source: function (request, response) { 
       $.ajax({ 
        type: "POST", 
        url: GW.Common.getBaseURL() + "/Functions/EmailCounts/TypeAHead.aspx/country_state_city", 
        data: "{'text':'" + request.term + "'}", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (msg) { 
         var jsonData = $.parseJSON(msg.d)[0].Cities; 
         response($.map(jsonData, function (item) { 
          return { 
           label: item.name + ', ' + item.state + ' ' + item.country, 
           value: item.name + ', ' + item.state + ' ' + item.country, 
           data: item // added as "extra" 
          }; 
         })); 
        }, 
        error: function (msg) { 
         alert(msg.status + ' ' + msg.statusText); 
        } 
       }) 
      }, 
      focus: function (event, ui) { 
       $birds.val(ui.item.label); 
       return false; 
      }, 
      select: function (event, ui) { 
       log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value); 
       $birds.val(ui.item.label); 
       $birds.attr("data", JSON.stringify(ui.item.data)); // now you can use the extra "data" you set in success. 
       return false; 
      } 
     });