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

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

的jsfiddle与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++; 
      } 
     }); 
    }); 

});