jquery ui 자동 완성 항목을 재정의하는 방법은 무엇입니까?

Question

내 페이지에있는 텍스트 상자에 GeoNames을에서 도시를로드 할 JQuery와 자동 완성을 사용하고

: 또한

$("#MyInput").autocomplete({ 
source: function (request, response) { 
    $.ajax({ 
     url: "http://ws.geonames.org/searchJSON", 
     dataType: "jsonp", 
     data: { 
      featureClass: "P", 
      style: "full", 
      maxRows: 10, 
      name_startsWith: request.term 
     }, 
     success: function (data) { 
      response($.map(data.geonames, function (item) { 
       return { 
        label: item.name + ", " + item.countryName, 
        value: item.name + " (" + item.countryName + ")" + " [" + item.countryCode + "]" 
       }; 
      })); 
     } 
    }); 
} 
}).data("autocomplete")._renderItem = function (ul, item) { 
    return $("<li></li>") 
     .data("item.autocomplete", item) 
     .append("<a><strong>" + item.label + "</strong>/" + item.value + "</a>") 
     .appendTo(ul); 
}; 

내 사용자 지정보기에 자동 완성 결과를 표시 _renderItem를 대체하기 위해 노력하고있어,하지만이 방법은 영향을받지 않습니다 내 물건에. 내 코드에서 무엇이 잘못 되었습니까? 당신은 예제를 찾을 수 있습니다 jsfiddle.net/

Answer 1

난 그냥 텍스트 상자의 "데이터"를 설정하고 싶었어요. 제 경우에는 "데이터"를 보여주고 싶지 않았습니다. 데이터라는 맵을 수행 할 때 세 번째 값을 "추가"하고 "항목"으로 설정 한 다음 "선택"섹션을 제공했습니다. 아래를 참조하십시오.

$(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; 
      } 
     });