Filter large amounts of data from a HTML table w/ jQuery

Question

I work for a transit agency and I have large amounts of data (mostly times), and I need a way to filter the data using two textboxes (To and From).

I found jQuery quick search, but it seems to only work with one textbox.

If anyone has any ideas via jQuery or some other client side library, that would be fantastic.

Ideal example:

To: [Textbox] From:[Textbox]

<table>
<tr>
<td>69th street</td><td>5:00pm</td><td>5:06pm</td><td>5:10pm</td><td>5:20pm</td>
</tr>
<tr>
<td>Millbourne</td><td>5:09pm</td><td>5:15pm</td><td>5:20pm</td><td>5:25pm</td>
</tr>
<tr>
<td>Spring Garden</td><td>6:00pm</td><td>6:15pm</td><td>6:20pm</td><td>6:25pm</td>
</tr>
</table>

I have an HTML page with a giant table on it listing the station names and each stations times. I want to be able to put my starting location in one box and my ending location in another box and have all the items in the table disappear that don't relate to either of the two locations typed in, leaving only two rows that match what was typed in (even if they don't spell it right or type it all the way) Similar to the jQuery quick search plugin

Answer 1

If you want to build your own then here's one possible implementation:

// store values for later
$('#table-to-fiter tr').each(function() {
    var firstCellText = $('td:first', this).text().toLowerCase();
    $(this).data('firstCellText', firstCellText);
});

function refreshFilter() {

    var toValue = $('#to-input').val().toLowerCase(),
        fromValue = $('#from-input').val().toLowerCase(),
        firstCellText;

    $('#table-to-fiter tr').each(function() {
        firstCellText = $(this).data('firstCellText');
        if (firstCellText.indexOf(toValue) !== -1 || firstCellText.indexOf(fromValue) !== -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

}

$('#to-input, #from-input').keyup(refreshFilter);

Answer 2

It's not fully clear what is your's task is. Lets assume, that you have a set of data, and need to filter it 2 times and display it in a grid.

I would do this in a following way:

1. To handle data filtering easily, I'll render in into JSON format. Example code will create array of java-script objects with Stantion string field and Time - array of strings. Json representation of data object will allow you to filter by each column, that is key point of representing data in JSON and rendering it on client side.

2. To do filtering, implement something like Ken proposed - handling on-key-up event of text box, but to take advantage of JSON data representation, filtering function will take StationInfo from data array.

3. Use JQGrid data to display filtering results.

Rough example:

    var data = [
            {Stantion: '69th street', Time: ['5:00pm', '5:05pm']}, 
            {Stantion: 'Millbourne', Time: ['5:00pm', '5:05pm']} // StationInfo object
    ];
    function RenderData(data)
    {
            // Rendering of data using JQGrid or JTemplates
    }
    $('#textbox-a').keyup(function()
    {
            var textBoxValue = $('#textbox-a').val();
            var filteredItems = $.grep(data, function(a, i)
            {
                    return a.indexOf(textBoxValue) != -1;
            });
            RenderData(filteredItems);
    });

Answer 3

Do you have access to the data itself? If you do you could create classes and append them to the table rows.

<tr class="Melbourne"><td></td><td></td></tr>

Then, on click of the button do something like

function myFilter(fromloc, toloc) {
  $("tr").hide();
  $("tr." + fromloc).show();
  $("tr." + toloc).show();
}

Would that work? Obviously in practice it may be a bit more complex. But jQuery selectors are incredibly powerful, and I think could handle doing manipulation just like this.