I'm currently trying to use the jQuery Livesearch plugin (http://ejohn.org/blog/jquery-livesearch/) to use a table instead of an unordered list.
I also want my search results to be shown based on the title attribute of the table row rather than the innerHTML of the table cell.
This is my HTML:
<div id="wrapper">
<form method="get" autocomplete="off">
<div>
<input value="" name="q" id="q" type="text">
</div>
</form>
<table>
<thead>
<tr>
<td>Head 1</td>
<td>Head 2</td>
<td>Head 3</td>
<td>Head 4</td>
<td>Head 5</td>
</tr>
</thead>
<tbody id="posts">
<tr title="foobar">
<td style="display: none;">Some text 1</td>
<td style="display: none;">Some text 2</td>
<td style="display: none;">Some text 3</td>
<td style="display: none;">Some text 4</td>
<td style="display: none;">Some text 5</td>
</tr>
</tbody>
</table>
</div>
This is my jQuery:
jQuery.fn.liveUpdate = function(list){
list = jQuery(list);
if ( list.length ) {
var rows = list.children('tr'), // changed this line to "tr" instead of "li"
cache = rows.map(function(){
return this.getAttribute('title').toLowerCase(); // changed this line to get the title instead of the innerHTML
});
this
.keyup(filter).keyup()
.parents('form').submit(function(){
return false;
});
}
return this;
function filter(){
var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
if ( !term ) {
rows.show();
} else {
rows.hide();
cache.each(function(i){
var score = this.score(term);
if (score > 0) { scores.push([score, i]); }
});
jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
jQuery(rows[ this[1] ]).show();
});
}
}
};
You can see what I've done so far here: http://timkjaerlange.com/foobar/foobar.html