Using server side scripts to search for things can be as complex or as simple as the situation requires. However, if you have a table of results and you just want to enable a simple JavaScript search on that table then this might be the script for you.
To search a table using JavaScript you need to split the table into bits, this can be done using the getElementsByTagName() function, which takes the name of the element that you want to capture. So to grab all of the rows of a table as an array you need to pass the value of tr.
var rows = document.getElementsByTagName("tr");
We can then iterate through these rows, grabbing the column that you want to search on, with the following code.
for ( var i = 0; i < rows.length; i++ ) {
var fullname = rows[i].getElementsByTagName("td");
fullname = fullname[0].innerHTML.toLowerCase();
}
Before we can go any further we need a form so that the user can enter information and a table that can be used to search. First the form, the action of the input box will cause a function called doSearch() to be run, this will contain our search code.
<form action="#" method="get" onsubmit="return false;">
<input type="text" size="30" name="q" id="q" value="" onkeyup="doSearch();" />
</form>
Next, the table. Note that I have added an additional row to the end of this table. This will be used to display a note to the user if they have entered a query that isn't found.
<table>
<tr><td>One</td></tr>
<tr><td>Two</td></tr>
<tr><td>Three</td></tr>
<tr><td>Four</td></tr>
<tr><td>Five</td></tr>
<tr><td>Six</td></tr>
<tr><td>Seven</td></tr>
<tr><td>Eight</td></tr>
<tr style="display:none;" id="noresults">
<td>(no listings that start with "<span id="qt"></span>")</td>
</tr>
</table>
The first thing we need to do in our search function is to prepare the search term. This turns the query string to lowercase, which we can then match to the table column.
var q = document.getElementById("q");
var v = q.value.toLowerCase();
Now we can go through each row value and try to match it to the value in the query string. If it matches then we display the row, if not then we hide it.
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 = "";
} else {
rows[i].style.display = "none";
}
}
}
Here is the full function, including the code to implement the no results note.
<script type="text/javascript">
//<!--
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";
}
}
}
var n = document.getElementById("noresults");
if ( on == 0 && n ) {
n.style.display = "";
document.getElementById("qt").innerHTML = q.value;
} else {
n.style.display = "none";
}
}
//-->
</script>
Comments
Submitted by alfred smith on Thu, 04/16/2009 - 16:09
PermalinkSubmitted by philipnorton42 on Fri, 04/17/2009 - 07:52
PermalinkI just improve slightly of the code
The function doSearch will require two parameter which is tableId and queryId
function doSearch( tableId, queryId) { var q = document.getElementById(queryId); var v = q.value.toLowerCase(); var t = document.getElementById(tableId); var rows = t.getElementsByTagName("tr"); var on = 0;...rest will be the same
Submitted by asipo on Sun, 03/06/2011 - 08:56
PermalinkSubmitted by Andro on Sun, 09/02/2012 - 04:12
PermalinkSubmitted by emma on Fri, 01/18/2013 - 06:39
PermalinkSubmitted by philipnorton42 on Fri, 01/18/2013 - 09:04
PermalinkSubmitted by Marco on Sun, 08/02/2015 - 18:57
PermalinkSubmitted by shubham on Wed, 10/26/2016 - 10:28
PermalinkHi, thanks for this great code. Is there a way to find results NOT equal to the search term.
For instance if I type "Boston" in the the search box, it will find all rows with Boston. But if I put an exclamation mark in front of Boston, "!Boston" , it will find everything except Boston. Or better still, two boxes, one for include and one for exclude. So searching for Boston would return:
Boston-Brookline
Boston-Dorchester
Boston-Southie
And then typing Southie in the exclude box would eliminate Boston-Southie from the results.
thanks very much in advance.
Submitted by Roger McCarrick on Mon, 02/15/2021 - 20:08
PermalinkHi Roger,
Yes, you should be able to do that by swapping the display:none attribute. For example, swap this:
To this:
That should hide anything that doesn't match in the list.
Submitted by philipnorton42 on Mon, 02/15/2021 - 21:43
PermalinkWhy does the script not work when the table contains header <th> rows?
Submitted by Alex on Thu, 01/26/2023 - 15:40
PermalinkIt's not something I thought about when I wrote this script back in 2009. It was 14 years ago and I've learnt a lot since then.
You think it's worth having anther bash at it?
Submitted by philipnorton42 on Fri, 01/27/2023 - 16:04
PermalinkAdd new comment