How to filter table that contains input cells using javascript?

Question

I have a table that take inputs and creates item names and descriptions based on the inputs. Is it possible using Javascript to filter a table that picks up inputs as data? i've found a lot of functioning filters but none seem to work with input cells

i've created a basic version of my table and added a jQuery filter i'm trying to use. As you can see the filter isn't functioning properly with the cell inputs - It also won't remove the filter once you've inputted into the search cell once. i've kept the function that creates new rows as i feel this might be causing problems as well.

 function cloneRow() { var rowAmmount = document.getElementById("rowAmmount").value; var getTotalRows = $('table > tbody').children().length; for (var i = -1; i < rowAmmount-1;i++) { var row = document.getElementById("row"); // find row to copy var table = document.getElementById("table"); // find table to append to var clone = row.cloneNode(true); // copy children too clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents clone.classList.remove('hidden'); table.appendChild(clone); // add new row to end of table $('#newRow' + (getTotalRows + i)).children().each(function() { $(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i)); }); } } var $rows = $('#table tr'); $('#search').keyup(function() { var val = '^(?=.*\\\\b' + $.trim($(this).val()).split(/\\s+/).join('\\\\b)(?=.*\\\\b') + ').*$', reg = RegExp(val, 'i'), text; $rows.show().filter(function() { text = $(this).text().replace(/\\s+/g, ' '); return !reg.test(text); }).hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="rowAmmount"/> <button id="add" onclick="cloneRow()">New Row</button> <button type="button" onclick="submit()">Submit</button> <select id="select"> <option value="html">HTML</option> <option value="packlist">Packlist</option> </select> <<input type="text" id="search" placeholder="Type to search"> <table> <thead> <tr> <th>No.</th> <th>Product Code</th> <th>Item Name</th> <th>Long Description</th> <th>Material</th> <th>Material Position</th> <th>Style</th> <th>Colour</th> <th>Dimensions</th> <th>Image</th> <th>Item Name</th> <th>Packlist</tr> </thead> <tbody id="table"> <tr id="row"> <td id="no"></td> <td><input id="productId" placeholder="Input"></td> <td><input id="itemname" placeholder="Input"></td> <td><input id="long" placeholder="Input"></td> <td><input id="fabric" placeholder="Input"></td> <td><input id="fabricInput" placeholder="Input 'Yes' 'No' or 'Number'"></td> <td><input id="style" placeholder="Input"></td> <td><input id="colour" placeholder="Input"></td> <td><input id="dimensions" placeholder="Input"></td> <td ><img id="image" src=""></output></td> <td ><output id="name"></output></td> <td><output id="description"></output></td> </tr> <tr id= "newRow0"> <td id="no0"></td> <td><input id="productId0" placeholder="Input"></td> <td><input id="itemname0" placeholder="Input"></td> <td><input id="long0" placeholder="Input"></td> <td><input id="fabric0" placeholder="Input"></td> <td><input id="fabricInput0" placeholder="Input 'Yes' 'No' or 'Number'"></td> <td><input id="style0" placeholder="Input"></td> <td><input id="colour0" placeholder="Input"></td> <td><input s id="dimensions0" placeholder="Input"></td> <td ><img id="image0" src=""></output></td> <td ><output id="name0"></output></td> <td><output id="description0"></output></td> </tr> </tbody> </table> 

Answer 1

First, your HTML is a bit sloppy: I had to change <<input ... to <input ... .
And some <img> were followed by </output>

The main issue is that you are using .text() on the table rows, but instead you should be using .val() on the inputs inside the rows .

Also I used a simple indexOf() to eliminate the risk of the regex being wrong.

Working demo (stripped most of the redundant or unneeded elements):

 var $rows = $('#table tr'); $('#search').keyup(function() { var searchText = $(this).val(); $rows .show() .filter(function() { var $inputs = $(this).find("input:text"); var found = searchText.length == 0; // for empty search, show all rows for (var i=0; i < $inputs.length && !found; i++) { var text = $inputs.eq(i).val().replace(/\\s+/g, ' '); found = text.length > 0 && text.indexOf(searchText) >= 0; } return !found; }) .hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="search" placeholder="Type to search"> <table> <thead> <tr> <th>Product Code</th> <th>Item Name</th> <th>Long Description</th> </thead> <tbody id="table"> <tr id="row"> <td><input id="productId" placeholder="Input"></td> <td><input id="itemname" placeholder="Input"></td> <td><input id="long" placeholder="Input"></td> </tr> <tr id="newRow0"> <td><input id="productId0" placeholder="Input"></td> <td><input id="itemname0" placeholder="Input"></td> <td><input id="long0" placeholder="Input"></td> </tr> </tbody> </table>