Автозаполнение для общего списка MVC 3

Question

У меня есть общий список в моем классе Model.Я хочу иметь текстовое поле с автозаполнением в моем представлении, которое заполняет данные из общего списка.Как я могу это сделать?.

Answer 1

Для этого вам понадобится

1. Функция на стороне сервера, которая возвращает список совпадающих данных и принимает введенную пользователем строку.

   Как то так

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

2. В представлении для текстового поля необходимо связать событие KeyDown . Для этого вы можете воспользоваться помощью jQuery . В обработчике нажатия клавиш вы сделаете Ajax-вызов функции, которую вы определили в контроллере. Примерно так:

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

   В ответ вы получите список строк, которые вам нужно будет привязать к какому-либо html-элементу, например, «UI». После этого отобразите этот интерфейс с соответствующим CSS под текстовым полем Используя jQuery, вы также можете получить текстовое поле в пикселях.

Вы не можете использовать коробку Asp.Net Auto Complete в вашем проекте, так как вы разрабатываете приложение в MVC (без viewstate). Я надеюсь, вы поняли идею.

Answer 2

Вы можете использовать JQuery Autocomplate.Чтобы заполнить список, вы можете заполнить данные от вашего объекта.Я не могу вспомнить точный синтаксис Razor, но вы можете сослаться на это:

//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/

Это автозаполнение на стороне клиента, я могу предоставить стороне сервера, еслитебе нужно.