[英]Ajax AutoComplete Search Doesn't Show Results
我正在嘗試實現我的第一個快速搜索功能,該功能會在您鍵入時在下拉菜單中顯示可能的結果。 我想我真的很親近。 但是由於某些原因,快速結果只是不會在瀏覽器中顯示。
這是視圖中的代碼:
@using (Ajax.BeginForm("Search", "Home", new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.ReplaceWith,
UpdateTargetId = "searchResults"
}))
{
<input type="text" name="q" data-autocomplete="@Url.Action("QuickSearch", "Home")" />
<input type="submit" value="Search" />
}
<table id="searchResults"></table>
然后發送到瀏覽器的HTML:
<form action="/Home/Search" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace-with" data-ajax-update="#searchResults" id="form0" method="post">
<input type="text" name="q" data-autocomplete="/Home/QuickSearch" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
<input type="submit" value="Search">
</form>
<table id="searchResults"></table>
我可以在查詢數據庫的控制器中的方法上設置一個斷點,然后使用Watch可以看到,每次按一下鍵都可以返回准確的結果:
public ActionResult QuickSearch(string term)
{
var restaurants = _db.Restaurants
.Where(r => r.Name.Contains(term))
.Take(10)
.Select(r => new { label = r.Name });
return Json(restaurants, JsonRequestBehavior.AllowGet);
}
最后,這是應該將它們結合在一起的JavaScript:
/// <reference path="jquery-1.4.4-vsdoc.js" />
/// <reference path="jquery-ui.js" />
/// <reference path="jQuery.tmpl.js" />
$(document).ready(function () {
$(":input[data-autocomplete]").each(function () {
$(this).autocomplete({ source: $(this).attr("data-autocomplete") });
});
$(":input[data-datepicker]").datepicker();
$("#searchForm").submit(function () {
$.getJSON($(this).attr("action"), // the url to get JSON from
$(this).serialize(), // make q=yellow, for example
function (data) { // what to do with the response
var result = $("#searchTemplate").tmpl(data);
$("#searchResults").empty()
.append(result);
}
);
return false;
});
})
我包括腳本:
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
另外...這可能是同一問題的一部分...不僅快速結果不顯示在屏幕下方的下拉菜單中,而且當我單擊“搜索”時,結果顯示在空白屏幕中,而不顯示在原始視圖符合預期。
在您的示例中,您從Controller返回帶有property
object
,而jQuery自動完成功能不理解它。
更改此:
.Select(r => new { label = r.Name });
對此:
.Select(r => r.Name );
一切都會正常
如果您想更進一步,那么有一個叫做Select2的插件可能會有用。
我有一個回答的問題,這里包含一個數據庫,涵蓋了實現(JS和控制器):
我的解決方案涵蓋了您在實現過程中使用的許多相同基礎。 希望能幫助到你!
原來,問題出在jquery文件之間。 我下載了最新版本的jquery,jquery-ui和jquery.unobtrusive,然后它起作用了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.