MVC ASP.Net Выпадающий список, который можно ввести в

Question

Я работаю над проектом, и мне нужно иметь раскрывающийся список, который позволяет пользователям вводить в него.

Это потому, что существует около 17000 записей (названия компаний), и страница занимает несколько секунд, чтобы начать отвечать (TTFB) из-за необходимости загружать так много записей.

Итак, как только кто-то начнет печатать, я хочу заполнить выпадающие записи, соответствующие тому, что человек печатает.

У меня есть все, кроме напечатанного выпадающего списка. Кто-нибудь из вас знает, как это разрешить?

Мой код до сих пор:

Вид:

<div class="form-group"> 
    @Html.LabelFor(model => model.CompanyRecId, "Company", new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     @Html.DropDownList("CompanyRecId", String.Empty) 
     @Html.ValidationMessageFor(model => model.CompanyRecId) 
    </div> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $("#CompanyRecId").change(function() { 
      var text= $(this).text(); 
      var subItems = ""; 
      console.log("JSON activated"); 
      $.getJSON("@Url.Action("GetCompanyList", "Delivery")", {searchstring:text}, function (data) { 
       $.each(data,function(index,item){ 
       subItems+="<option value='"+item.Value+"'>"+item.Text+"</option>" 
       }); 
       $("#CompanyRecId").html(subItems) 
      }); 
     }); 
    }); 
</script> 

Контроллер:

public ActionResult GetCompanyList(string SearchString) 
    { 
     SelectList CompanyList = new SelectList(db.Companies.Where(s => s.CompanyRecID != 0).Where(s => s.Company1.ToString().ToUpper().Contains(SearchString.ToUpper())).OrderBy(s => s.Company1), "CompanyRecID", "Company1"); 
     return Json(CompanyList, JsonRequestBehavior.AllowGet); 
    } 

Answer 1

Почему вы изобретать колесо? вы можете использовать jQueryUI Autocomplete widget для этого или любое из нескольких виджетов автозаполнения.

Единственное предостережение, которое я имел с автозавершением jQueryUI, заключается в том, что мне нужно было установить выбранное значение в скрытом поле (на событии select), чтобы оно было отправлено с формой. Конечно, вы должны правильно называть скрытое поле.