Question

我正在尝试创建自动填充文本框。这就是我所看到的 @model .....
@ { ViewBag.Title =“创建”; Layout =“〜/ 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>

Answer 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

初学者：自动完成无法正常工作？

1 个答案: