Question

我正在尝试使用另一个StackOverflow用户的几行代码在我的phonenumber表上进行简单的实时搜索。（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();
        }
    });
});

实时搜索无效

2 个答案: