Ajax 自动完成搜索不显示结果答案

【问题标题】：Ajax AutoComplete Search Doesn't Show ResultsAjax 自动完成搜索不显示结果
【发布时间】：2015-09-29 14:38:12
【问题描述】：

我正在尝试实现我的第一个快速搜索功能，该功能会在您键入时在下拉列表中显示可能的结果。我想我真的很接近了。但由于某种原因，快速结果并没有显示在浏览器中。

这是视图中的代码：

@using (Ajax.BeginForm("Search", "Home", new AjaxOptions
{
    HttpMethod = "GET",
    InsertionMode = InsertionMode.ReplaceWith,
    UpdateTargetId = "searchResults"
}))
{
    <input type="text" name="q" data-autocomplete="@Url.Action("QuickSearch", "Home")" />
    <input type="submit" value="Search" />
}

<table id="searchResults"></table>

然后是发送到浏览器的 HTML：

<form action="/Home/Search" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace-with" data-ajax-update="#searchResults" id="form0" method="post">
    <input type="text" name="q" data-autocomplete="/Home/QuickSearch" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
    <input type="submit" value="Search">
</form>

<table id="searchResults"></table>

我可以在查询数据库的控制器中的方法上设置一个断点，然后使用 Watch，我可以看到每次按键都会返回准确的结果：

    public ActionResult QuickSearch(string term)
    {
        var restaurants = _db.Restaurants
                             .Where(r => r.Name.Contains(term))
                             .Take(10)
                             .Select(r => new { label = r.Name });
        return Json(restaurants, JsonRequestBehavior.AllowGet);
    }

最后，下面是应该将它们结合在一起的 JavaScript：

/// <reference path="jquery-1.4.4-vsdoc.js" />
/// <reference path="jquery-ui.js" />
/// <reference path="jQuery.tmpl.js" />

$(document).ready(function () {

$(":input[data-autocomplete]").each(function () {
    $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});
$(":input[data-datepicker]").datepicker();

$("#searchForm").submit(function () {
    $.getJSON($(this).attr("action"),  // the url to get JSON from
              $(this).serialize(),     // make q=yellow, for example
              function (data) {      // what to do with the response
                  var result = $("#searchTemplate").tmpl(data);
                  $("#searchResults").empty()
                             .append(result);
              }
        );
        return false;
    });
})

我包括脚本：

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>

另外...这可能是同一问题的一部分...不仅快速结果不会显示在屏幕下方的下拉列表中，而且当我单击“搜索”时，结果会显示在空白屏幕中，而不是按预期在原始视图中。

【问题讨论】：

标签： javascript jquery ajax asp.net-mvc

【解决方案1】：

在您的示例中，您从控制器返回 object 和 property，而 jquery 自动完成不理解它。

改变这个：

.Select(r => new { label = r.Name });

到这里：

.Select(r => r.Name );

一切都会好起来的

【讨论】：

感谢您的提示！对此，我真的非常感激。我进行了更改，但它仍然无法正常工作。我应该在我的 OP 中说（我将对其进行编辑），不仅快速结果不会显示在搜索框下方的下拉列表中，而且......当我点击“搜索”时，结果会显示在空白处屏幕，而不是像预期的那样在视图内。
@CaseyCrookston 我不明白，您在自动完成或一般搜索方面有问题？
是的，似乎是自动完成功能不起作用。我认为这可能是因为 jquery 脚本文件不匹配。

【解决方案2】：

如果您想更进一步，那么有一个名为 Select2 的插件可能会很有用。

我有一个已回答的问题，其中涵盖了这里的数据库的实现（JS 和控制器）：

Fill Select2 dropdown box from database in MVC 4

我的解决方案涵盖了您在实施中使用的许多相同领域。希望对您有所帮助！

【讨论】：

【解决方案3】：

问题原来是 jquery 文件之间的不匹配。我下载了最新版本的jquery、jquery-ui和jquery.unobtrusive，然后就可以了。

【讨论】：