I have an autocomplete box in my application using ajax.
I use it for a search of houses in my database. I want to have it so when I search for a house, the results will come up clearly and when I want to get rid of the search result, the dialog which comes up with 1 house found goes away.
Here is my jQuery along with my search box:
<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>
I'll also attach a screenshot as it will show what I would like gone.