1

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.

enter image description here

enter image description here

Chloe Finn
  • 247
  • 1
  • 13

0 Answers0