자동 완성 일반 목록 MVC 3

Question

내 모델 클래스에 일반 목록이 있습니다. 필자는 일반 목록의 데이터를 채우는 내보기에서 자동 완성 기능이있는 텍스트 상자를 갖고 싶습니다. 어떻게해야합니까?

Answer 1

당신이 일치하는 데이터의 목록을 반환하고 사용자가 입력 한 문자열을 받아 서버 측에서

1. 기능이 필요합니다. 보기에서이

   public JsonResult AutoComplete(string input) 
   { 
       //Your code goes here 
   } 
   

2. 같은

   뭔가 텍스트 상자는 에서 KeyDown 이벤트를 바인딩해야합니다. 이에 대해서는 jQuery의 도움을받을 수 있습니다. 키 다운 핸들러에서 Controller에서 정의한 함수에 Ajax 호출을 수행합니다. 이 같은 일부 것은 : 응답에서

   $.ajax({ 
       url: '@Url.Action("AutoComplete", "ControllerName")', 
       data: 'input=' + sampleInput, 
       success: function (data) { 
       //Show the UL drop down 
       }, 
       error: function (data) { 
       // Show Error 
       } 
   }); 
   

   당신은 당신이 "UI"와 같은 일부 HTML 요소에 바인딩해야합니다 문자열의 목록을 얻을 것이다. 완료되면이 UI를 텍스트 상자 아래에 적절한 CSS로 표시하십시오. jQuery를 사용하면 텍스트 상자의 픽셀 위치도 검색 할 수 있습니다. 당신이 MVC (NO viewstate가)에서 응용 프로그램을 개발로

당신은 당신의 프로젝트에 Asp.Net 자동 완성 상자를 사용할 수 없습니다. 당신이 그 아이디어를 얻길 바랍니다.

Answer 2

JQuery Autocomplate를 사용할 수 있습니다. 목록을 채우기 위해 객체의 데이터를 채울 수 있습니다. 나는 정확한 면도기 구문을 기억하지 수 있지만,이 참조 할 수 있습니다 :

//data is your Model object of type List<String> 
var listString = [@foreach(x in data) { '@x',}]; 

$("#dataList").autocomplete({ 
    source: listString 
}); 

<input id="dataList"> 

JQuery와 Autocomplte http://jqueryui.com/demos/autocomplete/

를이 필요한 경우 클라이언트 측 자동 완성, 내가 서버 측을 제공 할 수있다.

이 들어