JSON 自动完成,不显示结果
本文关键字:显示 结果 JSON | 更新日期: 2023-09-27 18:37:25
我第一次尝试为自动完成输入类型实现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")" />
}
但它抱怨数据自动完成源不是一个有效的属性。它进入快速搜索,但我没有看到自动完成结果。
target.data("autocomplete-source");
使用 data 属性。 jQuery.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