2012-04-27 3 views
0

국가, 주에 대한 마스터가 있습니다 ..... 위치에 자동 완성 텍스트 상자를 만들었습니다. 이 자동 완성은이 마스터의 모든 위치 이름 (모든 국가 이름 및 상태 이름)을 반환합니다. jquery에 전달하는 모든 것은 문자열 형식의 위치 이름입니다. jquery에 위치 ID와 위치 이름을 모두 전달하려고하지만 자동 완성에 위치 이름 만 표시하려고합니다. 이 자동 완성은 사용자로부터 미리 지정된 위치를 저장하는 데 사용됩니다. 사용자 테이블에 사용자의 선호도 정보를 저장하려면 각 위치 이름과 함께 ID가 필요합니다.JSON을 사용하여 MVC3의 Autocomplete TextBox에 locationID를 전달합니다.

내가이 작업을 수행 할 수있는 방법을 제안 해주십시오 .... 데모가 더 유용 할 것이다 .....

답변

0

난 당신이 자동 완성 JqueryUI를 사용하는 가정합니다. JqueryUI의 Autocomplete는 기본적으로 w/json 객체를 처리합니다. 특히 "label"및 "value"속성을 갖는 객체 리터럴 배열입니다.

{ label:x, value:y } 

자동 완성은 자동 완성 일치를 계산하고, 사용자가 선택하면, 선택한 항목으로 "값"속성을 사용합니다 "라벨"속성을 사용합니다. 또한 "value"속성을 생략하면 "label"이 비교 및 ​​선택 모두에 사용됩니다.

주목할 중요한 점은 이러한 속성에 국한되지 않는다는 것입니다. 예를 들어 ..say .. "location_id"와 같은 추가 속성을 추가 할 수 있습니다. 자동 완성 이벤트 "를 선택"을 사용

{ label: "Some State and Country", location_id: 2 } 

, 당신은 어떤 행동, 즉 형태로 게시하거나 심지어 일류의 아약스 호출을 발사 할 숨겨진 입력 선택된 location_id를 저장할 수 있습니다. 사용해보기 :

... 
<form> 
Locations: <input id="location" /> 

<input type="hidden" id="location_id" /> 
<input type="submit"> 
</form> 
... 

<script> 
    var mylocations = [ 
     { 
     label: "North Carolina, USA", 
     id: 123 
     }, 
     { 
     label: "North Dakota, USA", 
     id: 128 
     }, 
     { 
     label: "Nevada, USA", 
     id: 125 
     }, 
     { 
     label: "New York, USA", 
     id: 311 
     }, 
     { 
     label: "New Brunswick, Canada", 
     id: 267 
     }, 
     { 
     label: "Nova Scotia, Canada", 
     id: 235 
     }, 
     { 
     label: "Newfoundlandand , Canada", 
     id: 223 
     }]; 

    $("#location").autocomplete({ 
    source: mylocations, 
    select: function(event, ui) { 
     // store your location id somewhere like a hidden input ..you 
     // can then allow the user to post the form (and selected id) back. 
     $("#location_id").val(ui.item.id); 
     return false; 
    } 
    }); 
</script> 
관련 문제