实时搜索不起作用

Jsn 发表于 Dev

JSn

我正在尝试使用另一个StackOverflow用户的几行代码来在我的电话号码表上进行简单的实时搜索。（如何对HTML表执行实时搜索和过滤）

我已将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内部进行工作。如果我转到全屏JsFiddle演示，则与我在Web服务器上自己的代码相同……有什么帮助吗？

茜草属

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

尝试以下替代示例：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。