自动完成通用列表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/

这是客户端自动完成，我可以提供服务器端，如果您需要。