实时搜索将不起作用

Question

我正在尝试使用另一位 Whosebug 用户的几行代码来对我的电话号码进行简单的实时搜索 table。 (How to perform a real time search and filter on a HTML table)

我已将 jQuery 添加到我的脚本中，并复制并粘贴了每一行代码（示例中的水果），但 Chrome 和 IE 都无法完成这项工作。我很困惑，但我认为有些东西我根本看不到。

这是我的代码：

<html>
<head>
    <title>Test</title>

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script>

    var $rows = $('#table tr');
    $('#search').keyup(function() {

     var $rows = $('#table tr');
    $('#search').keyup(function() {
        var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

        $rows.show().filter(function() {
            var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            return !~text.indexOf(val);
        }).hide();
    });

    </script>

    <style>

        body {padding: 20px;}
        input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
        td {padding: 4px; border: 1px #CCC solid; width: 100px;}

    </style>

</head>
<body>

    <input type="text" id="search" placeholder="Type to search">

<table id="table">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
     <td>Orange</td>
     <td>Orange</td>
   </tr>
</table>

</body>
</html>

JsFiddle 上发布的演示在 JsFiddle 内部运行。如果我去 Full-Screen JsFiddle Demo 它不会，就像我自己在我的网络服务器上的一段代码一样......有什么帮助吗？

Answer 1

这是一个JSFiddle Fullscreen

我所做的只是将 jQuery 引用更新为 1.10.1，就像您 1.7.1

$('#search').on('keyup', function () {
    var $rows = $('#table tr');
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $rows.show().filter(function () {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

Answer 2

这不是您问题的答案，但可能是您问题的解决方案。

试试这个替代示例：

jsFiddle Demo

HTML:

<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<table id="myTable" class="test1" border="1" style="border-collapse:collapse">
    <thead>
        <tr>
            <th>Name</th>
            <th>Sports</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sachin Tendulkar</td>
            <td>Cricket</td>
            <td>India</td>
        </tr>
        <tr>
            <td>Tiger Woods</td>
            <td>Golf</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Maria Sharapova</td>
            <td>Tennis</td>
            <td>Russia</td>
        </tr>
        <tr>
            <td>Mario Andretti</td>
            <td>Formula One</td>
            <td>Italy</td>
        </tr>
    </tbody>
</table>

javascript/jQuery:

$(document).ready(function(){
    // Write on keyup event of keyword input element
    $("#kwd_search").keyup(function(){
        // When value of the input is not blank
        var term=$(this).val()
        if( term != "") {
            // Show only matching TR, hide rest of them
            console.log( $(this).val())
            $("table tbody>tr").hide();
            var term=
            $("td").filter(function(){
                   return $(this).text().toLowerCase().indexOf(term ) >-1
            }).parent("tr").show();
        } else {
            // When no input or clean again, show everything
            $("tbody>tr").show();
        }
    });
});

实时搜索将不起作用

Live search won't work

javascript

search

jquery

html-table

live