隱藏輸入內容被刪除的內容（手動）

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

});