无法让 jQuery 自动完成功能工作。 (ASP.NET MVC)

Question

我正在尝试通过tvanfosson 遵循this post 中的示例。 我只是无法让它工作。我认为问题出在我的 JavaScript (?) 上。 我这么说是因为如果我在浏览器中导航到http://localhost:49790/Books/GetBooks/?q=，那么浏览器会下载一个文件，其中包含我期望的格式的信息：

[{"BookName":"Book 1","AuthorName":"Author 1","BookID":2},{"BookName":"Book 2","AuthorName":"Author 2","BookID":3}]

但回到视图上，当我开始在 SearchBox 中输入时，什么也没有发生。没有自动完成。

这是我的看法：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    jQuerySearch
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">


<script type="text/javascript">

    $(document).ready(function() {

        $('#SearchBox').autocomplete('/Books/GetBooks', {
            dataType: 'json',
            max: 25,
            minChars: 1,
            cacheLength: 1,
            mustMatch: true,
            formatItem: function(data, i, max, value) {
                return value;
            },
            parse: function(data) {
                var array = new Array();
                for (var i = 0; i < data.length; i++) {
                    var datum = data[i];
                    var display = datum.AuthorName + ' - ' + datum.BookName;
                    array[array.length] = { data: datum, value: display, result: display };
                }
            }
        });

        $('#SearchBox').result(function(event, data, formatted) {
            if (data) {
                $('#BookID').val(data.BookID);
            }
        });

        $('form').submit(function() {
            if (!$('#BookID').val()) {
                alert('You must select a book before clicking submit!');
                return false;
            }
        });




    });
        </script>
    <h2>jQuerySearch</h2>

    <%using (Html.BeginForm()){%>

        <%=Html.TextBox("SearchBox") %>
        <input type='hidden' id='BookID' name='BookID' />

    <%}; %>


</asp:Content>

这是我的控制器代码：

 public ActionResult GetBooks(string q)
{
var query = db.Books.Where(e => e.Name.Contains(q))
                            .OrderBy(e => e.Name)
                            .Select(e => new
                            {
                                BookName = e.Name,
                                AuthorName = e.Author.Name,
                                BookID = e.BookID
                            });

      return Json(query.ToList());
  }

我对这一切都很陌生。任何帮助表示赞赏。

谢谢。

Answer 1

解析器方法在最近的一个项目中让我们头疼，尤其是 IE 6 和 8。 所以我们选择这样使用它： 记得添加引用：

jQuery 核心

<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

jQuery 自动完成

<link href="../../Scripts/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.autocomplete.js" type="text/javascript"></script>

试试这样的： 控制器

public ActionResult Completer(string q)
        {
            if (q != "")
            {
                NWDataContext db = new NWDataContext();
                var suggest = from i in db.Customers
                                  .Where(e => e.ContactName.ToLower().StartsWith(q.ToLower()))
                                   select (i.ContactName + "|" + i.CustomerID);
                return Content(String.Join("\n", suggest.ToArray()));
            }
            return new EmptyResult();
        }

这将返回类似：

Ana Trujillo|ANATR
Antonio Moreno|ANTON
Ann Devon|EASTC
Aria Cruz|FAMIA
André Fonseca|GOURL
Annette Roulet|LAMAI

在你的视野中：

$('#Clientes').autocomplete(' <% =Url.Action("Completer","Home") %>', {
                width: 300,
                formatItem: formatItem,
                formatResult: formatResult
            });

并定义 formatItem 和 Format 结果，如：

 function formatItem(row) {
                return row[0] + " (<strong>id: " + row[1] + "</strong>)";
            }
function formatResult(row) {
                return row[0].replace(/(<.+?>)/gi, '');
            }

希望对您有所帮助。 你可以看看这个网站jquery-plugin-autocomplete-con-asp-net-mvc，它是西班牙语的，但是你可以在文末下载一个示例项目。

Answer 2

您需要在parse 函数的末尾返回您的数组：

parse: function(data) {
    var array = new Array();
    for (var i = 0; i < data.length; i++) {
        var datum = data[i];
        var display = datum.AuthorName + ' - ' + datum.BookName;
        array[array.length] = { data: datum, value: display, result: display };
    }
    return array; // Add this line
}