Search data from the table using javascript - php

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> </th>
<th> </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: