jqueryui autocomplete render HTML, возвращаемый сервером

Question

У меня есть простая страница с текстовым полем ввода. Текстовое поле привязано к автозаполнению jquery ui, что делает вызов AJAX сервером. Мой серверный код - это сайт ASP.NET MVC. Единственное отличие, которое я имею в сравнении с большинством примеров, обнаруженных через Интернет, заключается в том, что мой код на стороне сервера возвращает PartialView (html-код) в качестве результатов вместо JSON. Я вижу, что вызов AJAX происходит, и я вижу ответ HTML в событии успеха AJAX.

Мой вопрос в том, как связать данные HTML, которые будут отображаться в автозаполнении?

код у меня до сих пор:.

$ ("# quick_search_text") автозаполнения ({ MINLENGTH: 3, HTML: правда, Автофокус: правда, источник: функция (запрос, ответ) {

  $.ajax({ 
       type: "POST", 
       url: "serversideurl", 
       data: "{ 'SearchTerm': '" + request.term + "', 'SearchCategory': '" + $("#quick_search_category").val() + "' }", 
       contentType: "application/json; charset=utf-8", 
       dataType: "html", 
       error: function (jqXHR, textStatus, errorThrown) { 
        console.log(jqXHR); 
       }, 
       success: function (data) { 
        //THIS IS WHERE MY HTML IS RETURNED FROM SERVER SIDE 
        //HOW DO I BIND THIS TO JQUERY UI AUTOCOMPLETE 
       } 
      }); 
     }, 
     select: function (event, ui) { 
     }, 
     response: function (event, ui) { 
      console.log(ui); 
      console.log(event); 
     } 
    }); 

Answer 1

Это работает: 1) Создайте действие в контроллере и установить RouteConfig начать это действие

public class HomeController : Controller 
{ 
    public ActionResult Index20() 
    { 
     MyViewModel m = new MyViewModel(); 
     return View(m); 
    } 

Создайте представление без какой-либо главной страницы

Добавить вид модели:

public class MyViewModel 
{ 
    public string SourceCaseNumber { get; set; } 
} 

Перейти к Manage NuGet пакеты или консоли PM и добавить к MVC 5 проекта - Typeahead.js для MVC 5 Модели по Tim Wilson

изменения пространства имен для добавленного HtmlHelpers.cs в System.Web.Mvc.Html и восстановить

Добавить этот класс:

public class CasesNorm 
{ 
    public string SCN { get; set; } 
} 

Добавьте эти методы к контроллеру:

private List<Autocomplete> _AutocompleteSourceCaseNumber(string query) 
    { 
     List<Autocomplete> sourceCaseNumbers = new List<Autocomplete>(); 
     try 
     { 
      //You will goto your Database for CasesNorm, but if will doit shorthand here 

      //var results = db.CasesNorms.Where(p => p.SourceCaseNumber.Contains(query)). 
      // GroupBy(item => new { SCN = item.SourceCaseNumber }). 
      // Select(group => new { SCN = group.Key.SCN }). 
      // OrderBy(item => item.SCN). 
      // Take(10).ToList(); //take 10 is important 

      CasesNorm c1 = new CasesNorm { SCN = "11111111"}; 
      CasesNorm c2 = new CasesNorm { SCN = "22222222"}; 
      IList<CasesNorm> aList = new List<CasesNorm>(); 
      aList.Add(c1); 
      aList.Add(c2); 
      var results = aList; 

      foreach (var r in results) 
      { 
       // create objects 
       Autocomplete sourceCaseNumber = new Autocomplete(); 

       sourceCaseNumber.Name = string.Format("{0}", r.SCN); 
       sourceCaseNumber.Id = Int32.Parse(r.SCN); 
       sourceCaseNumbers.Add(sourceCaseNumber); 
      } 
     } 
     catch (EntityCommandExecutionException eceex) 
     { 
      if (eceex.InnerException != null) 
      { 
       throw eceex.InnerException; 
      } 
      throw; 
     } 
     catch 
     { 
      throw; 
     } 
     return sourceCaseNumbers; 
    } 

    public ActionResult AutocompleteSourceCaseNumber(string query) 
    { 
     return Json(_AutocompleteSourceCaseNumber(query), JsonRequestBehavior.AllowGet); 
    } 

Заслуга http://timdwilson.github.io/typeahead-mvc-model/