服务器返回的 jqueryui 自动完成渲染 HTML

Question

我有一个带有输入文本框的简单页面。文本框绑定到 jquery ui 自动完成，对服务器进行 AJAX 调用。我的服务器端代码是一个 ASP.NET MVC 站点。 与在 Internet 上找到的大多数示例相比，我唯一的区别是我的服务器端代码 returns PartialView（html 代码）作为结果而不是 JSON。我看到 AJAX 呼叫发生，我也在 AJAX 成功事件中看到 HTML 响应。

我的问题是如何绑定此 HTML 数据以在自动完成中显示？

我目前的代码是：

$("#quick_search_text").autocomplete({ 最小长度：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; }
}

转到管理 Nuget 包或 PM 控制台并添加到 MVC 5 项目 - Typeahead.js Tim Wilson 的 MVC 5 模型

将添加的 HtmlHelpers.cs 的命名空间更改为 System.Web.Mvc.Html 并重建

添加这个 class:

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

jqueryui autocomplete render HTML returned by server

ajax

asp.net-mvc

jquery-ui

jquery-ui-autocomplete