views:

62

answers:

0

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