CODEWITHSUNDEEP
javascriptjqueryhtml-tablerows
Anon
Anon

Reputation: 13

JQuery search bar to hide table rows

Hopefully someone will be able to help me with this. I have a dynamically created table full of info, and I am trying to use JQuery to only show rows that are matching what is being typed in the search bar. The match is of the first td within each row. I am not sure why this does not work.

JQuery

var $foo = $('#table-name tr input[name="someValue"]');
$('#search').keyup(function() {
var bar = $.trim($(this).val()).toLowerCase();


$foo.parent().parent().show().filter(function() {
    var thud = $(this).val().toLowerCase();
    return !~thud.indexOf(bar);
}).hide();

When entering any character in the search bar all of the rows disappear, whether or not there are any matches. The table is structured as follows:

table

    <table id="table-name">
            <thead>
                <tr>
                    <th>0</th>
                    <th>1</th>
                </tr>
            </thead>
    <c:forEach>
    <form:form id = “{id}”>
                    <tr id="${id2}">
    <td><input type="text" class= “someClass" name= “someValue"> </input></td>
        <td><select class="someClass" name="otherValue"> </select> </td>
    </tr>
    </form:form>
</c:forEach>
</table>

Why is my JQuery not behaving correctly?

Upvotes: 1

Views: 1796

Answers (1)

DDan
DDan

Reputation: 8276

No need to reinvent the wheel. Try this one:

JQuery Quicksearch: http://deuxhuithuit.github.io/quicksearch/r/examples/

Your JS code becomes no more than:

$('#id_search').quicksearch('table#table_example tbody tr');

See running example: http://jsfiddle.net/ddan/tqhxqwrh/1

Upvotes: 1

Related Questions