框清空后自动完成结果清除

时间:2018-04-17 16:51:07

标签: javascript jquery

我的应用程序中有一个使用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>

我还会附上截图,因为它会显示我想要的内容。

enter image description here

enter image description here

0 个答案:

没有答案