I have a search bar that will filter results in a table.
I would like the script to ignore any words in the search bar that do not match a keywords or items.
[Search Bar]
Item1 | Keyword1 |
Item2 | Keyword2 |
Item3 | Keyword3 Keyword4 |
<input type="text" id="search" placeholder="Type to search">
<table id="table">
<tr>
<td>Item1</td>
<td>Keyword1</td>
</tr>
<tr>
<td>Item2</td>
<td>Keyword2</td>
</tr>
<tr>
<td>Item3</td>
<td>Keyword3 Keyword4</td>
</tr>
</table>
<br>
<b>Working</b>
<p>Search: "Item1" will display Item1 row (working)</p>
<p>Search: "Keyword3" will display Item3 row (working)</p>
<p>Search: "Keyword4 Keyword3" will display Item3 row (working)</p>
<br>
<b>Not Working (please help me fix this)</b>
<p>Search: "Keyword1 Keyword3" will display Item1 and Item3 row (not working)</p>
<p>Search: "Keyword1 hello world" will display Item1 row (not working)</p>
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();
});
Fix the search bar so I can search...