Search data from the table is not working

Question

I am currently working on javascript. In this code I have a table and a textbox. When I enter data in the textbox it should show the particular value that I typed but it doesn't search any data from the table. How do I search data in the table?I have provided the link below.

http://jsfiddle.net/SuRWn/

       <table name="tablecheck" class="Data" 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>

        <tbody>
        <tr id="rowUpdate" class="TableHeaderFooter">
        <td>
            <center> <input    type="text"    name="input"    value="course" ></center>
            <center> <input    type="text"    name="input"    value="course1" ></center>
            <center> <input    type="text"    name="input"    value="course2" ></center>
        </td>
        <td>
            <center> <input    type="text"    name="input"    value="subject" ></center>
            <center> <input    type="text"    name="input"    value="subject1" ></center>
            <center> <input    type="text"    name="input"    value="subject2" ></center>

        </td>


          </tr>

           </tbody>

         </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 q = document.getElementById("q");
    var v = q.value.toLowerCase();
    var rows = document.getElementsByTagName("tr");
    var on = 0;
    for (var i = 0; i < rows.length; i++) {
        var fullname = rows[i].getElementsByTagName("td");
        fullname = fullname[0].innerHTML.toLowerCase();
        if (fullname) {
            if (v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1)) {
                rows[i].style.display = "";
                on++;
            } else {
                rows[i].style.display = "none";
            }
        }
    }

}

Answer 1

I would like to highlight a few things for this code:

• In your code, the loop starts from 0, as table has first row as header row, it will not contain any "tr" elements. Hence your function is not working.
• If we start loop from 1, you need to go through the input element to search the value. Existing approach wont work.

In case of loop starting from 1, your fullname variable will look like this:

May be you will have to modify your comparison logic by fetching the value of input fields.

Answer 2

Ok, here is a working version, but your algorithm is not perfect. You can debug and fix the logic errors:

First problem:

onKeyUp="javascript:doSearch();"

JSFiddle

There was many semantical errors compare with yours, still not perfect: (lass then 3 letters problem, and cases when it finds something)

If you type "course", it finds, but still keeps all visible (you have to fix it, it's easy.) If you type less then 3 letters, do nothing, don't hide all.

function doSearch() {
var q = document.getElementById("q");
var v = q.value.toLowerCase();
var rows = document.getElementsByTagName("tr");
var on = 0;
for (var i = 0; i < rows.length; i++) {
    var fullname = rows[i].getElementsByTagName("td");
    if (fullname.length > 0) {
        fullname = fullname[0].innerHTML.toLowerCase();
        if (fullname) {
            if (v.length == 0 || (v.length < 3 && fullname.indexOf(v) == 0) || (v.length >= 3 && fullname.indexOf(v) > -1)) {
                rows[i].style.display = "";
                on++;
            } else {
                rows[i].style.display = "none";
            }
        }
    }
  }
}

Answer 3

Is your html the way you wanted? You seem to want to create a table with rows, and then filter those rows based on the users input. The way your html is now, there is only one row.

After you fix that, I would recommend using jquery. Here is a fiddle to get you started: http://jsfiddle.net/SuRWn/11/

$(function () {
    var q = $('#q'),
        boxes = $('td input');

    $('#q').on('keyup', function (e) {
        var qterm = q.val();

        if (qterm.length < 3) {
            boxes.show();
        } else {
            boxes.each(function(i,o) {
                var box = $(this);
                box.toggle(box.val().indexOf(qterm) > -1);
            });
        }
    });
});

edit: note that the fiddle is filtering your input boxes and now the rows (since there are no rows to filter)