我的应用程序中有一个使用ajax的自动完成框。
我用它来搜索我的数据库中的房屋。我希望拥有它,所以当我搜索房子时,结果会清晰显示,当我想要删除搜索结果时,找到1个房子的对话框就会消失。
这是我的jQuery以及我的搜索框:
<table style="border:none">
<tr>
<td><label class="editor-label">Search Address:</label></td>
<td id="searchBar1">@Html.TextBox("SearchStringAddress")</td>
<td><label class="editor-label">Search House ID:</label></td>
<td></td>
<td id="searchBar2">@Html.TextBox("SearchStringHouseNumber")</td>
<td>
<input type="submit" value="Search" />
@if (TempData["Error"] != null)
{
<div style="color:red">@TempData["Error"]</div>
}
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$('#SearchStringAddress').autocomplete({
source: function(request, response) {
$.get('@Url.Action("GetAddress", "Donations")',
{ term: request.term },
function(data) {
response($.map(data, function (item) {
if (item.Label !=null && item.Value != null) {
return {
label: item.Label,
value: item.Value,
realValue: item.RealValue,
}
}
else if (item.Label == "" || item.Value == "")
{
return
{
false;
}
}
}));
});
},
select: function (event, ui) {
var houseId = $('#SearchStringHouseNumber');
houseId.val(ui.item.realValue);
console.log(ui.item.realValue);
}
})
</script>
我还会附上截图,因为它会显示我想要的内容。