Show/Hide rows based on search textbox

Question

I am trying to do the following effect, the rows are already present on the page, so I guess is something about jquery syntax, but I am not very smart on jquery, yet.

http://kobikobi.wordpress.com/2008/09/15/using-jquery-to-filter-table-rows/

Its just not working, and yes the jquery libraries are included.

Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        //add index column with all content.
        $(".filterable tr:has(td)").each(function () {
            var t = $(this).text().toLowerCase(); //all row text
            $("<td class='indexColumn'></td>")
    .hide().text(t).appendTo(this);
        }); //each tr
        $("#FilterTextBox").keyup(function () {
            var s = $(this).val().toLowerCase().split(" ");
            //show all rows.
            $(".filterable tr:hidden").show();
            $.each(s, function () {
                $(".filterable tr:visible .indexColumn:not(:contains('"
          + this + "'))").parent().hide();
            }); //each
        }); //key up.
    }); //document.ready

</script>


<table class="filterable">
    <tr>
        <th>
            name
        </th>
        <th>
            yearsExperienceRequired
        </th>
        <th>
            Actions
        </th>
          <th>
            Index Column
        </th>
    </tr>

@foreach (var item in Model) {
    <tr class="indexColumn">
        <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.yearsExperienceRequired)
        </td>
         <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.PositionID }) |
            @Html.ActionLink("Details", "Details", new { id = item.PositionID }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.PositionID })
        </td>
    </tr>
}

</table>

The generated HTML is the following one,

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Index</title>

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />



</head>

<body>

    <div class="page">

        <header>

            <div id="title">

                <h1>Eva 1.0</h1>

            </div>

            <div id="logindisplay">

                    Welcome <strong>eva</strong>!

    [ <a href="/Account/Register">Register New User</a> ]

    [ <a href="/Account/LogOff">Log Off</a> ]

    [ <a href="/Account/ChangePassword">Change Password</a> ]





            </div>



            <nav>

                <ul id="menu">                    

                        <li> <a href="/">DashBoard</a></li>                        

                        <li> <a href="/Position">Positions</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Prospects</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Prospect History</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Technical Interview</a> </li> 

                        <li> <a href="/UserPositionPosition/Position">Manager Interview</a> </li> 

                        <li> <a href="/UserPositionPosition/Position">Current Employees</a> </li>

                        <li> <a href="/UserPositionPosition/Position">Current Employees History</a> </li>

                </ul>

            </nav>

        </header>

        <section id="main">









<h2>Index</h2>



<p>

    <a href="/Position/Create">Create New</a>  



</p>



Filter: <input type="text" id="FilterTextBox" name="FilterTextBox" />

<script language="javascript" type="text/javascript">

    $(document).ready(function () {

        //add index column with all content.

        $(".filterable tr:has(td)").each(function () {

            var t = $(this).text().toLowerCase(); //all row text

            $("<td class='indexColumn'></td>").hide().text(t).appendTo(this);

        }); //each tr

        $("#FilterTextBox").keyup(function () {

            var s = $(this).val().toLowerCase().split(" ");

            //show all rows.

            $(".filterable tr:hidden").show();

            $.each(s, function () {

                $(".filterable tr:visible .indexColumn:not(:contains('"+ this + "'))").parent().hide();

            }); //each

        }); //key up.

    }); //document.ready


</script>





<table class="filterable">

    <tr>

        <th>

            name

        </th>

        <th>

            Years of Experience Required

        </th>

        <th>

            Index Column

        </th>

        <th>

            Actions

        </th>

    </tr>



    <tr class="indexColumn">

        <td>

            .net developer

        </td>

        <td>

            5

        </td>

         <td>

            .net developer

        </td>

        <td>

            <a href="/Position/Edit/1">Edit</a> |

            <a href="/Position/Details/1">Details</a> |

            <a href="/Position/Delete/1">Delete</a>

        </td>

    </tr>

    <tr class="indexColumn">

        <td>

            java developer

        </td>

        <td>

            5

        </td>

         <td>

            java developer

        </td>

        <td>

            <a href="/Position/Edit/2">Edit</a> |

            <a href="/Position/Details/2">Details</a> |

            <a href="/Position/Delete/2">Delete</a>

        </td>

    </tr>



</table>



        </section>

        <footer>

        </footer>

    </div>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>





    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>

    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>



</body>

</html>

this shouldnt be so difficult, anyone please help? – Luis Valencia Oct 19 '11 at 14:29 — Luis Valencia, Oct 19 '11 at 14:29

Kevin Cloet · Accepted Answer · 2011-10-19T18:30:28.130

When I test your code in JS bin everything is working.

http://jsbin.com/ipobiz

You can edit it in the right corner.

He did give a warning about a line break in your

$(".filterable tr:visible .indexColumn:not(:contains('" 
          + this + "'))").parent().hide();

thou but that's probably because I just copied pasted the code from here.

Possible fixes

Your previous javascript files might be cached. Try CTRL + F5 to do a full refresh of everything.
Try separating your code from your view and try it again because that seems to work just fine here.
Add a alert(t); or console(t);in this function:

This will show you the values that are put in the IndexColumn. If he doesn't show any of your values then something is wrong with the for each in your jquery.

$(".filterable tr:has(td)").each(function () { 
            var t = $(this).text().toLowerCase(); //all row text 
            //alert(t); or console(t); here
            $("<td class='indexColumn'></td>") 
    .hide().text(t).appendTo(this); 
        });

the alert is not even executing, please check the HTML generated code, is it maybe because the reference to the .JS is at the end of the file? I heard that was a best practice. @Kevin Coet — Luis Valencia, Oct 20 '11 at 07:23
The official jquery things should be loaded first. So put all thoses in the head and it works :) Check http://stackoverflow.com/questions/1220956/move-jquery-to-the-end-of-body-tag — Kevin Cloet, Oct 20 '11 at 07:31

Show/Hide rows based on search textbox

1 Answers1