Question

我有一个实时搜索框，除非用户删除内容，否则内容不会自行隐藏。

我的代码是：

$(document).ready(function(){
  $('input[name=filter]').attr('autocomplete','off');
  $("#filter").keyup(function(){
   var filter = $(this).val(), count = 0;
   $(".country li").each(function(){
    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
     $(this).fadeOut();
    } else {
     $(this).show();
     $('#call-content').show();
     count++;
    }
   });
  });
 });
 $( "#clear" ).click(function() {
  $('#filter').val('');
  $('#call-content').hide();
 });

JS提供HTML here

Answer 1

我做了一些更改： Working Fiddle。

首先，$('#call-content').show()移出条件之外，并在任何击键时执行。

其次，我改变了你的条件，也检查了#filter中是否缺少值。

Answer 2

如果搜索结果文本为空，请尝试清空搜索结果字段。

 $(document).ready(function(){
    $('input[name=filter]').attr('autocomplete','off');
    $("#filter").keyup(function(){
    if($(this).val()){
        var filter = $(this).val(), count = 0;
        $(".country li").each(function(){
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
           $(this).fadeOut();
        } else {
           $(this).show();
           $('#call-content').show();
           count++;
        }
       });
      } else{
      $('#call-content').empty();
      }
   });

  });

Answer 3

<强> Demo Fiddle

您只需要添加空文本条件。

$(document).ready(function(){
    $('input[name=filter]').attr('autocomplete','off');
    $("#filter").keyup(function(){
        $('#call-content').show();
        var filter = $(this).val(), count = 0;
        $(".country li").each(function(){
            if ($(this).text().search(new RegExp(filter, "i")) < 0 || filter == '') {
                $(this).hide();   
            } else {
                $(this).show();
                count++;
            }
        });
    });

});

删除输入内容时隐藏内容（手动）

3 个答案: