Live search won't work

Question

I'm trying to use a few lines of code from another StackOverflow user to get a simple live search on my phonenumber table. (How to perform a real time search and filter on a HTML table)

I have added jQuery to my script, and copied and pasted every single line of code (the fruits as in the example) but Chrome nor IE does the job. I'm pretty stuck, but I think that there is something that I simply don't see.

Here is my code:

<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>

The demo posted on JsFiddle works inside of JsFiddle. If I go to the Full-Screen JsFiddle Demo it doesn't, same as my own piece of code on my webserver... Any help?

you have `var $rows = $('#table tr');$('#search').keyup(function() {` twice, also do you get any errors in the console — depperm, Jul 24 '15 at 15:23

score 0 · Answer 1 · answered Jul 24 '15 at 15:34

0

Here is a JSFiddle Fullscreen

All I did was update the jQuery reference to 1.10.1 as you have 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();
});

answered Jul 24 '15 at 15:34

shammelburg

6,974
7
26
34

As you can see, I am using jQuery 1.11.3 in my code. So that doesn't seem to be the problem. But it indeed fixes the Full-Screen Demo. – JSn Jul 24 '15 at 15:42

score 0 · Accepted Answer · answered Jul 24 '15 at 15:45

This is not an answer to your question, but perhaps a solution to your problem.

Try this alternate example:

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

This works. But it doesn't show my results as I type a capital letter. In your JSFiddle, I type a capital "T" . It should display Tiger Woods, but it doesn't show anything. If I type a lowercase "t", it works. — JSn, Jul 27 '15 at 06:47
Therefore, just convert the received keystrokes to `toLowerCase()`, and all will work. Change this line: `var term=$(this).val();` to this: `var term=$(this).val().toLowerCase();`. [Here is revised jsFiddle](http://jsfiddle.net/je6q5dq1/1/) with that small update. — cssyphus, Jul 27 '15 at 14:14

Live search won't work

2 Answers2