jqueryui自动完成呈现服务器返回的HTML

问题描述：

我有一个带有输入文本框的简单页面。文本框绑定到jQuery UI自动完成，使AJAX调用服务器。我的服务器端代码是一个ASP.NET MVC网站。 与我在互联网上发现的大多数例子相比，唯一的区别是我的服务器端代码返回PartialView（html代码）作为结果而不是JSON。我看到了AJAX调用的发生，并且我也看到了AJAX成功事件中的HTML响应。jqueryui自动完成呈现服务器返回的HTML

我的问题是如何绑定这个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); 
     } 
    });

您可以使用[TAG-IT（http://aehlke.github.io/tag-it/） For Impelement AutoCompelet。 –

答

这工作： 1）建立在你的控制器的操作，并设置RouteConfig开始这个动作

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

创建一个视图没有任何类型的母版页

添加这个视图模型：

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

转到管理的NuGet包或PM控制台，并添加到MVC 5项目 - Typeahead.js的MVC 5由蒂姆·威尔逊

改款车型的加入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/

jqueryui自动完成呈现服务器返回的HTML

相关推荐