自動完成通用列表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元素的列表。完成後，在文本框下方用適當的CSS顯示此UI。使用jQuery，您也可以檢索文本框的像素位置。

當您在MVC（無視圖狀態）中開發應用程序時，不能在項目中使用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/

這是客戶端自動完成，我可以提供服務器端，如果您需要。