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

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&开发者_C百科gt;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

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);

If you need to filter on each column individually in a table, try to use the ColumnFilter jQuery plugin (see Jquery plugin page and demo page).

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.

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);
    });