I made a table and wanted to make it searchable, so I googled and looked here at starckoverflow.
But somehow, the things I've found, that should work, dont work for me?
Here is the code, both HTML and JS.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="C.Palma" />
<meta name="content" content="World of Warcraft. Characters. Project. Learn 2 Code." />
<title>World of Warcraft Characters.</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/modernizr.js"></script>
<script type="text/javascript">
// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
$(document).ready(function(){
// Write on keyup event of keyword input element
$("search").keyup(function(){
// When value of the input is not blank
if( $(this).val() != "")
{
// Show only matching TR, hide rest of them
$("#table tbody tr").hide();
$("#table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
// When there is no input or clean again, show everything back
$("#table tbody tr").show();
}
});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
</script>
</head>
<body>
<div class="row large-centered">
<h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
</div>
<div class="row large-centered">
<input type="text" id="search" placeholder="Type to search..." />
<table id="table" width="100%">
<thead>
<tr>
<th>Character name</th>
<th>Class</th>
<th>Realm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Benjamin.</td>
<td>Rogue.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Cachoito.</td>
<td>Hunter.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Contemplario.</td>
<td>Paladin.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Elthron.</td>
<td>Death Knight.</td>
<td>Agamaggan ES.</td>
</tr>
<tr>
<td>Giloh.</td>
<td>Priest.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Kitialamok.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Magustroll.</td>
<td>Mage.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Marselus.</td>
<td>Mage.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Mistrala.</td>
<td>Warrior.</td>
<td>Uldum ES.</td>
</tr>
<tr>
<td>Suavemente.</td>
<td>Warrior.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Tittus.</td>
<td>Monk.</td>
<td>Agamaggan EN.</td>
</tr>
<tr>
<td>Yarlokk.</td>
<td>Warlock.</td>
<td>Uldum ES.</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I have put the part of your code that matters and wrote a working fiddle
http://jsfiddle.net/9hGym/602/
this is now the search engin:
var searchText = $(this).val().toLowerCase();
$.each($("#table tbody tr"), function() {
if($(this).text().toLowerCase().indexOf(searchText) === -1)
$(this).hide();
else
$(this).show();
});
you can also use http://www.datatables.net/ for such things ;)
I found that the above solution was fine in theory (although it didn't work), but I found this to work better:
$('#search-field').on('keyup', function(e) {
if ('' != this.value) {
var reg = new RegExp(this.value, 'i'); // case-insesitive
$('.table tbody').find('tr').each(function() {
var $me = $(this);
if (!$me.children('td:first').text().match(reg)) {
$me.hide();
} else {
$me.show();
}
});
} else {
$('.table tbody').find('tr').show();
}
});
If you want to search more than one column then just change:
if (!$me.children('td:first').text().match(reg)) {
To:
if (!$me.children('td').text().match(reg)) {
The ways posted were a little slow for my table. I came up with a different solution that seems to be much faster.
If you want to search through every cell you can add an attribute to the cell (I used data-name), ex:<td data-name="john smith">John Smith</td>. Then you can use this javascript code:
$("#search").keyup(function() {
var val = this.value.trim().toLowerCase();
if ('' != val) {
var split = val.split(/\s+/);
var selector = 'td';
for(var i=0;i<split.length;i++){
selector = selector+'[data-name*='+split[i]+']';
}
$('tr').hide();
$(selector).closest('tr').show();
} else {
$('tr').show();
}
});
If you just want to search a rows for a single attribute you can just add the attribute to the row like <tr data-name="john smith"><td>John Smith</td><td>...</td></tr> and use the following:
$("#search").keyup(function() {
var val = this.value.trim().toLowerCase();
if ('' != val) {
var split = val.split(/\s+/);
var selector = 'tr';
for(var i=0;i<split.length;i++){
selector = selector+'[data-name*='+split[i]+']';
}
$('tr').hide();
$(selector).show();
} else {
$('tr').show();
}
});
Hope that helps!
You can use this code. It is working excellent.
$('#search').keydown(function () {
var searchitem = $('#search').val();
if (searchitem == '' || searchitem == null || searchitem == undefined) {
$('#table tbody tr').show();
}
else {
searchitem = searchitem.toUpperCase();
$('#table tbody tr').hide();
$('#table tbody tr').each(function () {
if ($(this).text().indexOf(searchitem) > -1) {
$(this).show();
}
});
}
});
来源：https://stackoverflow.com/questions/20567426/search-html-table-with-js-and-jquery