Search HTML table with JS and jQuery

Milo picture Milo · Dec 13, 2013 · Viewed 35.4k times · Source


I made a table and wanted to make it searchable, so I googled and looked here at starckoverflow.
But somehow, the things I've found, that should work, dont work for me?

Here is the code, both HTML and JS.

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="C.Palma" />
    <meta name="content" content="World of Warcraft. Characters. Project. Learn 2 Code." />

    <title>World of Warcraft Characters.</title>

    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/modernizr.js"></script>

    <script type="text/javascript">
        // When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
        $(document).ready(function(){
            // Write on keyup event of keyword input element
            $("search").keyup(function(){
                // When value of the input is not blank
                if( $(this).val() != "")
                {
                    // Show only matching TR, hide rest of them
                    $("#table tbody tr").hide();
                    $("#table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
                }
                else
                {
                    // When there is no input or clean again, show everything back
                    $("#table tbody tr").show();
                }
            });
        });
        // jQuery expression for case-insensitive filter
        $.extend($.expr[":"],
                {
                    "contains-ci": function(elem, i, match, array)
                    {
                        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
                    }
                });
    </script>

</head>
<body>

    <div class="row large-centered">
        <h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
    </div>
    <div class="row large-centered">
        <input type="text" id="search" placeholder="Type to search..." />
        <table id="table" width="100%">
            <thead>
                <tr>
                    <th>Character name</th>
                    <th>Class</th>
                    <th>Realm</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>Benjamin.</td>
                <td>Rogue.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Cachoito.</td>
                <td>Hunter.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Contemplario.</td>
                <td>Paladin.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Elthron.</td>
                <td>Death Knight.</td>
                <td>Agamaggan ES.</td>
            </tr>
            <tr>
                <td>Giloh.</td>
                <td>Priest.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Kitialamok.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Magustroll.</td>
                <td>Mage.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Marselus.</td>
                <td>Mage.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Mistrala.</td>
                <td>Warrior.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Suavemente.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Tittus.</td>
                <td>Monk.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Yarlokk.</td>
                <td>Warlock.</td>
                <td>Uldum ES.</td>
            </tr>
            </tbody>
        </table>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>

</body>
</html>

Answer

Cracker0dks picture Cracker0dks · Dec 13, 2013

I have put the part of your code that matters and wrote a working fiddle

http://jsfiddle.net/9hGym/602/

this is now the search engin:

    var searchText = $(this).val().toLowerCase();
    $.each($("#table tbody tr"), function() {
        if($(this).text().toLowerCase().indexOf(searchText) === -1)
           $(this).hide();
        else
           $(this).show();                
    });

you can also use http://www.datatables.net/ for such things ;)