ASP.Net MVC Jquery UI自动完成 - 我调试时没有显示列表

Question

我已在我的应用中为邮政编码实施了自动填充功能.我在Firebug中进行调试,我在控制台中看到操作正在执行,我在结果列表中得到了一个邮政编码列表,但是当我调试时,实际列表没有显示.

这是我的Customers控制器中的操作:

//the autocomplete request sends a parameter 'term' that contains the filter
public ActionResult FindZipCode(string term)
{
    string[] zipCodes = customerRepository.FindFilteredZipCodes(term);

    //return raw text, one result on each line
    return Content(string.Join("\n", zipCodes));
}

这是标记(缩写)

<% using (Html.BeginForm("Create", "Customers")) {%>
<input type="text" value="" name="ZipCodeID" id="ZipCodeID" />
<% } %>

这是我加载脚本的顺序:

<script type="text/javascript" src="/Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.position.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.autocomplete.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#ZipCodeID").autocomplete({ source: '<%= Url.Action("FindZipCode", "Customers") %>'});
    });
</script>

有什么明显我错过了吗？就像我说脚本正在抓取邮政编码列表一样,我测试时它们不会显示在我的页面上.

编辑:我添加了一个图像,显示我在firebug中看到的内容 - 似乎我收到了我的邮政编码,但是不会显示下拉列表.

我还更新了我的文本框,以便它在ui-widget div中,如下所示:

<div class="ui-widget">
    <input type="text" name="ZipCodeID" id="ZipCodeID" />
</div>

这是我正在使用的脚本:

<script type="text/javascript">
    $(document).ready(function() {
        $("#ZipCodeID").autocomplete('<%= Url.Action("FindZipCode", "Customers") %>');
    });
</script>

Answer 1

我能够使用以下代码获取自动完成建议:

控制器:

public JsonResult FindZipCode(string term)
    {
        VetClinicDataContext db = new VetClinicDataContext();

        var zipCodes = from c in db.ZipCodes
                       where c.ZipCodeNum.ToString().StartsWith(term)
                       select new { value = c.ZipCodeID, label = c.ZipCodeNum};

        return this.Json(zipCodes, JsonRequestBehavior.AllowGet);
    }

标记:

<script type="text/javascript">
    $(document).ready(function() {
        $("#ZipCodeID").autocomplete({
                  source: '<%= Url.Action("FindZipCode", "Customers") %>',
        });
    });
</script>

<div class="ui-widget"><input type="text" name="ZipCodeID" id="ZipCodeID" /></div>