Question

我创建了一个手动搜索功能，可以在用户输入时显示结果。这是小提琴：https://jsfiddle.net/rtq4jfuq/1/

这是HTML

<script src='https://code.jquery.com/jquery-3.2.1.min.js'></script>
<input style='width: 300px;' placeholder='search' id='search'>
<table border='1'>
    <tr>
        <th>Name</th>
    </tr>
    <tr class='names'>
        <td>Bob</td>
    </tr>
    <tr class='names'>
        <td>Ted</td>
    </tr>
    <tr class='names'>
        <td>Steve</td>
    </tr>
    <tr class='names'>
        <td>Sven</td>
    </tr>
    <tr class='names'>
        <td>Magnus</td>
    </tr>
</table>

这是脚本

$(document).ready(function() {

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

        var query = $(this).val(); 

        $(".names").each(function(){ 
             var n = $(this).children("td").html(); 

            if (n.toUpperCase().includes(query.toUpperCase())) { 
                $(this).css("display", ""); 
            } 
            else { 
                $(this).css("display", "none"); 
            } 
        }); 
    }); 
});

我希望在没有显示行的情况下显示消息，但如何检查是否没有显示行？

Answer 1

使用$(document).ready(function() { $("#search").keyup(function() { var query = $(this).val(); $(".names").each(function() { var n = $(this).children("td").html(); if (n.toUpperCase().includes(query.toUpperCase())) { $(this).css("display", ""); } else { $(this).css("display", "none"); // Check to see if all elements have been hidden if (!$(".names:visible").length) { // All element hidden, do something here alert("no results"); } } }); }); });过滤器，看看您是否隐藏了所有结果：

$(document).ready(function() {
  $("#search").keyup(function() {
    var query = $(this).val();
    var matches = $(".names").filter(function() {
      return $(this).children("td").html().toUpperCase().includes(query.toUpperCase())
    }).show();

    $(".names").not($(matches)).hide();

    if (!$(".names:visible").length) {
      $("#myTable").append("<tr class='noRecords'><td>No records found</td></tr>");
    } else {
      $(".noRecords").remove();
    }
  });
});

修改

仅供参考 - 您的代码可以大大简化。这是一个快速而肮脏的例子 - 我确信还有进一步改进的空间：

data = "In many countries food manufacturers are required by"

这是a working fiddle。

Answer 2

我建议你不要添加/删除一个内联CSS添加/删除一个display none的类，这样你就可以找到该类有多少元素，并再次比较你有多少单元格，如果数字匹配你会知道没有显示任何单元格

jQuery如何计算隐藏的元素

2 个答案: