Search data from the table using javascript

Question

I am currently working on an application based on JavaScript and PHP. In my app, I have a table and a textbox - when I enter data in the textbox, the table should show the particular value that I typed. My current implementation does not work as I am not sure how to complete the search component - can anyone help?

          <table name="tablecheck" class="DataTable" id="results" >
     <thead>
          <tr ><th>&nbsp;</th>
    <th>&nbsp;</th>
    <th><center><b>COURSE CODE</b></center></th>
    <th><center>COURSE NAME</center></th></tr>
    </thead>
       <?php if(isset($records)) : foreach ($records as $row) : ?>
       <tbody>
       <tr id="rowUpdate" class="TableHeaderFooter">
    <td>
     <?php echo anchor('coursemaster_site/delete/'.$row->id, 'Delete',array('onClick'=>"return confirm('ARE YOU WANT TO DELETE..?')")); ?>
    </td>

     <td>
        <input type=checkbox name="editcustomer[] "    id="editcustomer[]"  value="<?php echo $row->id ?>" >

      </td>

      <td >
     <input class="inputwide span2 "    type="text"    onblur="upper(this)"  name="course_code_<?php echo $row->id ?>" id=" course_code_<?php echo $row->id ?>"   value="<?php echo   $row->course_code ; ?> " >

     </td>
     <td>
       <input class="inputmedium span2"    type="text" name="course_name_<?php echo $row->id ?>" id="course_name_<?php echo $row->id ?>" value="<?php echo $row->course_name ; ?>" >

    </td>


    </tr>
</tbody>
   <?php endforeach ; ?>
   <?php endif ; ?>
   </table>




   <form action="#" method="get" onSubmit="return false;">
    <label for="q">Search Here:</label><input type="text" size="30" name="q" id="q" value="" onKeyUp="doSearch();" /> 
   </form>
    <script>
  function doSearch() {
  var rowContainsSearchTerm, fullname;
   var q = document.getElementById("q");
   var v = q.value.toLowerCase();
   var rows = document.getElementsByTagName("tr");
     var searchTermMoreThanTwoCharsLong = v.length > 2; 

       for ( var i = 1; i < rows.length; i++ ) {
    fullname = concatInputValues(rows[i].getElementsByTagName("input"));
    if (fullname) {
        rowContainsSearchTerm = fullname.indexOf(v) > -1;
        if (searchTermMoreThanTwoCharsLong && rowContainsSearchTerm) {
            rows[i].style.backgroundColor = "#00F";
        } else {
            rows[i].style.backgroundColor = "";                
        }
    }
   }
   }

    function concatInputValues(inputs){ 
    var inputContents = "";
    for (var j = 0; j < inputs.length; j++) {
    inputContents = inputContents + inputs[j].value;
     }
   return inputContents;
   }
   </script>

Answer 1

Have you considered using JQuery DataTables? The plugin has a really nice table view as well as automatically enabled search textbox, and should fit in easily with your JavaScript/PHP solution.

See example table below: