c# - JSON 自动完成，不显示结果

Question

我第一次尝试为自动完成输入类型实现 JSON。

@{
    ViewBag.Title = "Index";
}

<script type="text/javascript">
function searchFailed(){
$("#searchresults").html("Sorry, there was a problem with the search.");
}
    $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({ source: target.attr("data-autocomplete-source") });
    });
</script>

<h2>Index</h2>

@using (Ajax.BeginForm("QuickSearch", "Search", new AjaxOptions { InsertionMode = InsertionMode.Replace, HttpMethod = "GET", OnFailure = "searchFailed", LoadingElementId = "ajax-loader", UpdateTargetId = "searchresults", }))
{
<input type="text" name="q" data-autocomplete-source="@Url.Action("QuickSearch", "Search")" />

}

但是它提示 data-autocomplete-source 不是一个有效的属性。它进入了快速搜索，但我没有看到自动完成结果。

Answer 1

 target.data("autocomplete-source");

使用数据属性。查询。 data

---

替换:

$("input[data-autocomplete-source]").each(function () {
    var target = $(this);
    target.autocomplete({ source: target.attr("data-autocomplete-source") });
});

与:

$(function () {
    $("input[data-autocomplete-source]").each(function () {
        var target = $(this);
        target.autocomplete({ source: target.data("autocomplete-source") });
    });
});

您使用 $(function () {}) 等待页面“就绪”并且元素存在。

---

改变:

<input type="text" name="q" data-autocomplete-source="@Url.Action("QuickSearch", "Search")" />

到:

<input class="my-autocomplete" type="text" name="q" data-autocomplete-source="@Url.Action("QuickSearch", "Search")" />

并改变:

$("input[data-autocomplete-source]").each

到:

$("input.my-autocomplete").each