jqueryjsonquick-search

jQuery quicksearch plug-in tinkering with JSON


I've implemented the quicksearch plugin by Rik Lomas and I love it for an application in a custom CMS I'm building. I was wondering though, since I'm going to have a bizillion items in the table if there's a way to use the data from my json callback to populate the table as a user searches rather than the table contents themselves.

So when you load the page the chain of events would go something like this:

-jQuery.getJSON request -Initiate quicksearch and limit the number of rows initially presented in the table -As the user makes keystrokes in the filter, the new values are pulled from the JSON data rather than the table contents (still limiting the number displayed in the table) and the table is updated.

My JSON request:

$.getJSON("jsonrequest.php", function(data){

    $.each(data, function(i){
        $("#result tbody").append('<tr><td>' + this.organization + '</td><td>' + this.city + '</td><td>' + this.state + '</td></tr>');
    });

});

My quicksearch function:

$('table#result tbody tr').quicksearch({
    position: 'before',
    attached: 'table#result',
    stripeRowClass: ['evenrows', ''],
    labelText: 'Filter Results: ',
    loaderText: '',
    delay:0,
    focusOnLoad:true
});

Solution

  • If this helps anyone I've implemented the jQuery plugin DataTables to solve this one, which offers grid functions, pagination and a live filter. It seems to be the most versatile grid plugin I've come across for my needs.