Single search box for searching / filtering a data table

@SteveBrewerAug 10.2007

I have a friend who was looking for a single-search-box dynamic search/filter for a table (like search works in iTunes). I could find any examples out there, so I build a ~~[URL=”http://www.bigdumbdev.com/2007/08/table-searchfilter-using-single-input.html”]~~single input table search[/URL] myself. I thought I would share.

I would love any feedback. Does anyone know of another implementation for this type of functionality?

Thanks,
-Steve

to post a comment

JavaScript

@NatdripAug 10.2007 — #cool ?

@gomisuteAug 10.2007 — #Very nice.

But if your data is on a server and you can access it with , say, php, then why not use ajax?

works just the same.

here is an example:

<i>
 </i>&lt;html&gt;
 &lt;body&gt;
 
 &lt;script type="text/javascript"&gt;
 function ajaxFunction()
 {
 var xmlHttp;
 try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
 catch (e)
 {
 // Internet Explorer
 try
 {
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }
 catch (e)
 {
 try
 {
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (e)
 {
 alert("Your browser does not support AJAX!");
 return false;
 }
 }
 }
 
 <i>    </i>xmlHttp.onreadystatechange=function()
 <i>    </i>  {
 <i>    </i>  if(xmlHttp.readyState==4)
 <i>    </i>    {
 
 <i>	</i>	var page=document.getElementById('page').innerHTML=xmlHttp.responseText;
 
 <i>    </i>    }
 <i>    </i>  }
 <i>    </i>xmlHttp.open("GET","phpinfo.php",true);
 <i>    </i>xmlHttp.send(null);
 }
 &lt;/script&gt;
 
 
 &lt;form name="myForm"&gt;
 type something and a page will be displayed...&lt;br&gt;
 
 Name: &lt;input type="text"
 onkeyup="ajaxFunction();" name="username" /&gt;
 &lt;br&gt;&lt;br&gt;
 
 The Page:&lt;br&gt;
 &lt;span id="page"&gt;&lt;/span&gt;
 &lt;/form&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@SteveBrewerauthorAug 10.2007 — #Thanks, gomisute. The script is agnostic on where the data comes from. Dynamic search, where you have no results, type and stuff starts showing up, would be a different pattern.

I would see this script as something you could easily put on top of an existing page with a data table.

@slaughtersAug 10.2007 — #It looks functionally simular to an AutoComplete script I wrote a bit ago:

http://www.stansight.com/AutoComplete3.html

Never really had much use for it yet, but it was fun to make.

Single search box for searching / filtering a data table

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Single search box for searching / filtering a data table

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴