Search box for table

Question

Given this table:

<table class="tbllist searchtbl" cellpadding=2 cellspacing=0 style="width: 70%">
    <tr>
        <th class="hidden">ID</th>
        <th>Number Plate</th>
        <th>Chassis Number</th>
        <th>Trailer Make</th>
        <th>Year</th>
        <th>Axles</th>
        <th></th>
    </tr>
    <tr class='tbl'>
        <td class='hidden'>3</td>
        <td>
            <input type=text  style = 'width: 75px'  class='centered'  id='trnumberplate_3' name='trnumberplate_3'  value='T212ABS'  onfocus='this.oldvalue = this.value;' onchange='updatevalue("trailers","trnumberplate", this.value ,"trid","3","","1",this, "false")'>
        </td>
        <td>
            <input type=text  style = 'width: 200px'  id='trchassisnumber_3' name='trchassisnumber_3'  value='AJSDGASJH'  onfocus='this.oldvalue = this.value;' onchange='updatevalue("trailers","trchassisnumber", this.value ,"trid","3","","1",this, "false")'>
        </td>
        <td>
            <input type=text  style = 'width: 200px'  id='trmake_3' name='trmake_3'  value='LOW LOADER'  onfocus='this.oldvalue = this.value;' onchange='updatevalue("trailers","trmake", this.value ,"trid","3","","1",this, "false")'>
        </td>
        <td>
            <input type=text  style = 'width: 50px'  class='centered'  id='tryear_3' name='tryear_3'  value='2009'  onfocus='this.oldvalue = this.value;' onchange='updatevalue("trailers","tryear", this.value ,"trid","3","1","",this, "false")'>
        </td>
        <td>
            <input type=text  style = 'width: 25px'  class='centered'  id='traxles_3' name='traxles_3'  value='3'  onfocus='this.oldvalue = this.value;' onchange='updatevalue("trailers","traxles", this.value ,"trid","3","1","",this, "false")'>
        </td>
        <td class='delbtn'>
            <button id='trailers_3'  title='DELETE THIS ITEM (3)?' onclick='event.preventDefault(); delitem("trailers","trid","3","trailers.php","#workspace")'><img src='/icons/delete.png' ></button>
        </td>
    </tr>
</table>

I have the following search function:

function searchbox() {
    // text input search for tables (such as trip history etc)
    $("#search").keyup(function () {
        //split the current value of searchInput
        var data = this.value.toUpperCase().split(" ");
        //create a jquery object of the rows
        var jo = $(".tbllist").find("tr").not("tr:first"); // exclude headers
        if (this.value == "") {
            jo.show();
            return;
        }
        //hide all the rows
        jo.hide();

        //Recusively filter the jquery object to get results.
        jo.filter(function (i, v) {
            var $t = $(this);
            for (var d = 0; d < data.length; ++d) {
                if ($t.is(":contains('" + data[d] + "')")) {
                    return true;
                }
            }
            return false;
        })
        //show the rows that match.
        .show();
    })

It will loop through table td's to check if the searched value is available and filter rows. It is not filtering if the td contains an input text element with the searched value.

Update:

if ($t.find("input").val().toUpperCase().indexOf(data[d]) > 0) {
    return true;
}

Now works but will only matches the first column of the table.

JSFiddle: https://jsfiddle.net/fabriziomazzoni79/30d52c9z/

Answer 1

Change jo.filter() like this:

jo.filter(function (i, v) {

    var txt = '';

    $(v).find("input").each(function(n,e){
        txt += e.value;
    });

    for(var d=0; d<data.length; d++){
       if (txt.search(data[d])>=0) {
            return true;
       }
    }

    return false;

})

Fiddle here.