清除文本框后如何清除以前的搜索结果答案

【问题标题】：How to clear the previous search results once you clear the textbox清除文本框后如何清除以前的搜索结果
【发布时间】：2018-04-06 01:29:19
【问题描述】：

我正在尝试使用 JSP 和 AJAX 以及 jquery 来实现自动完成功能。即使我清除了文本框中的内容，div标签内的搜索结果也没有清除

HTML sn-p:

<div class="form-group">
  <label for="message-text">Employee Name:</label>
  <input ng-model="names" align="left" type="text" name="name" id="name" class="form-control" autocomplete="off" placeholder="Enter a Name" required />
  <div id="myDIV">
    <div id="nameList" class="namecontent"></div>
  </div>
</div>

jQuery 代码：

$(document).ready(function() {

    $('#name1').keyup(function() {
        var query = $(this).val();
        if(query != '') {

            $.ajax({
                url: "names.jsp",
                method: "POST",
                data: { query: query },
                success: function(data) {
                    $('#nameList1').fadeIn();
                    $('#nameList1').html(data);
                }
            });
        }
    });

    $(document).on('click','li',function() {
        //alert($(this).text());
        $('#name1').val($(this).text());
        $('#nameList1').fadeOut();
    });

});

清除文本框后，我想清除所有搜索结果。有人可以帮我怎么做吗？

【问题讨论】：

标签： jquery html ajax jsp autocomplete

【解决方案1】：

您已经在检查 (query != '')，因此您只需添加一个 else 即可从其内容中清除 nameList1：

if(query != '')
{
    $.ajax({
        url:"names.jsp",
        method:"POST",
        data:{query:query},
        success:function(data) {
            $('#nameList1').fadeIn();
            $('#nameList1').html(data);
        }
   });
}
else {
    // clear the results
    $('#nameList1').html('');
}

【讨论】：