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

时间:2017-10-25 04:57:21

标签: jquery html ajax jsp autocomplete

我正在尝试使用JSP和AJAX以及jquery实现自动完成。即使在清除文本框

中的内容后,div标签内的搜索结果也不会清除

HTML片段:

<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();
    });

});

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

1 个答案:

答案 0 :(得分:0)

您已经在查看是否(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('');
}