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

Question

我在我的应用程序中实现了邮政编码的自动完成功能。我正在 Firebug 中进行调试，我在控制台中看到该操作正在执行，并且我在结果列表中获得了邮政编码列表，但在调试时实际列表并未显示。

这是我的客户控制器中的操作：

//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>

Answer 2

几个月前，当我第一次设置自动完成功能时，我遇到了很大的问题。例如，像您这样的简单默认接线对我来说从来没有用过。我必须指定所有内容，并将结果函数附加到其中。

这 100% 有效，但可能不适合您。但我希望它有帮助。将两者都放在 document.ready() 函数中。

$("#products").autocomplete('<%:Url.Action("GetProducts", "Product") %>', {
    dataType: 'json',
    parse: function (data) {
        var rows = new Array(data.length), j;
        for (j = 0; j < data.length; j++) {
            rows[j] = { data: data[j], value: data[j].Title, result: data[j].Title };

        }
        return rows;
    },
    formatItem: function (row, y, n) {
        return row.PrettyId + ' - ' + row.Title + ' (' + row.Price + ' €)';
    },
    width: 820,
    minChars: 0,
    max: 0,
    delay: 50,
    cacheLength: 10,
    selectFirst: true,
    selectOnly: true,
    mustMatch: true,
    resultsClass: "autocompleteResults"
});
$("#products").result(function (event, data, formatted) {
    if (data) {

        var item = $("#item_" + data.PrettyId),
                    edititem = $("#edititem_" + data.PrettyId),
                    currentQuantity;
        // etc...
    }
});

Answer 3

尝试从控制器操作返回 JSON：

public ActionResult FindZipCode(string term)
{
    string[] zipCodes = customerRepository.FindFilteredZipCodes(term);
    return Json(new { suggestions = zipCodes }, JsonRequestBehavior.AllowGet);
}

另外不要忘记包含默认 CSS，否则您可能看不到建议 div 出现。