初学者：自动完成不起作用？答案

【问题标题】：Beginner: Autocomplete not working?初学者：自动完成不起作用？
【发布时间】：2014-01-29 07:49:03
【问题描述】：

我正在尝试创建一个自动完成文本框。这就是我的看法 @模型.....
@{ ViewBag.Title = "创建"; 布局 = "~/Views/Shared/_Layout.cshtml"; }

@using(Html.BeginForm("Action","Controller"))
{
   @Html.TextBoxFor(m=>m.myEmail)
}

@section Scripts{
    @Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")

    <script type="text/javascript">
        $(function() {
            $("#myEmail").
                autocomplete({
                        source: '/App/Per',
                        minLength: 1,

                    }
                );   
        });

    </script>
}

当我在文本框中输入 s 时，会向控制器中的此方法发送请求

public JsonResult Person(string term)
{
    var persons = FindPersons(term,"bk@hello.com","bk").ToArray();
    var fullnameList = persons.Select(person => person.FirstName + " " + person.LastName).ToList();
    return Json(fullnameList, JsonRequestBehavior.AllowGet);
}

在浏览器中，当我检查 chrome 中的元素并检查 response 时，我得到了值，例如

0: "Person1"
1: "Person2"
2: "Person3"
3: "Person4"

问题

我的自动完成框没有填满这些数据。我不应该在文本框的底部得到一个带有上述名称的列表框吗？

编辑 2： 生成的 HTML

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.7.1.js"></script>


</head>
<body>

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Date Picker</a>

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li><a href="/Home/About">About</a></li>
                    <li><a href="/Home/Contact">Contact</a></li>
                </ul>
                    <ul class="nav navbar-nav navbar-right">
        <li><a href="/Account/Register" id="registerLink">Register</a></li>
        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
    </ul>

    <div class="container body-content">

    <link href="/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>


<h2>Create</h2>
<form action="/App/Cr" method="post"><input id="myEmail" name="myEmail" type="text" value="" /></form>


    </div>

    <script src="/Scripts/jquery-2.0.3.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>


    <script src="/Scripts/jquery-ui-1.10.4.min.js"></script>


    <script type="text/javascript">
        $(function() {
            $("#myEmail").
                autocomplete({
                        source: '/App/Per',
                        minLength: 1,

                    }
                );   
        });

    </script>

【问题讨论】：

Javascript 控制台有错误可以分享吗？
你对js的引用是否正确添加？
没有 javascript 错误，我将截取浏览器中正在加载的文件的屏幕截图。只需一分钟
您是否还引用了 jQuery UI 的 CSS 主题文件？
@TiesonT。不，我没有，可能这就是问题所在。我应该在哪里引用它？在我的 jquery-ui.js 部分的最后还是之后？

标签： c# jquery asp.net-mvc autocomplete

【解决方案1】：

看起来没什么特别的（除了 CSS 链接放错了地方）。您可能想尝试以不同的方式格式化您的 JSON，这也会产生回答您最后一个问题的效果。

而不是这个：

public JsonResult Person(string term)
{
    var persons = FindPersons(term,"bkc@example.com","bk").ToArray();
    var fullnameList = persons.Select(person => person.FirstName + " " + person.LastName).ToList();
    return Json(fullnameList, JsonRequestBehavior.AllowGet);
}

尝试使用：

public JsonResult Person(string term)
{
    var persons = FindPersons(term,"bk@example.com","bk").ToArray();

    return Json(persons.Select(p => new { label = p.FirstName + " " + p.LastName, value = p.Email }), JsonRequestBehavior.AllowGet);
}

这是 API 所说的小部件将使用的结果之一：http://api.jqueryui.com/autocomplete/#option-source

【讨论】：

所以，我的预感或多或少是正确的：小部件没有正确解析您的 JSON。看起来很奇怪，但 c'este le vie。