如果没有结果,jQuery显示div

时间:2014-06-15 13:06:49

标签: jquery

我有一个实时搜索脚本(JS fiddle),我需要在其中添加错误消息。

基本上我需要检查:

  • 如果搜索框包含1个或多个字符

  • 没有可用的搜索结果

当前代码:

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

对于能够为我这样做的功能的任何指导表示赞赏

1 个答案:

答案 0 :(得分:1)

<强> Working Demo

检查文本框中的值的长度。

if(filter.length >= 1){
     alert('1 or more')
}

检查搜索中是否有任何结果。

if(!$('li:visible').length){
     alert('no results');
}

最终代码

$(document).ready(function () {
    $('input[name=filter]').attr('autocomplete', 'off');

    $("#filter").keyup(function () {

        var filter = $(this).val(),
            count = 0;
        if (filter.length >= 1) {
            alert('1 or more')
        }

        $(".country li").each(function () {
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
            } else {
                $(this).show();
                $('#call-content').show();
                count++;
            }
        });
        if (!$('li:visible').length) {
            alert('no results');
        }
    });

});