Download DhtmlGoodies Filter("DG Filter")

Demo 1 | Demo 2 | Demo 3

Bookmark and Share

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

You can download the entire script from this Zip file.

Files included in package

  • dg-filter.html, dg-filter-demo2.html, dg-filter-demo3.html = Demo HTML files
  • js/dg-filter.js = Main Javascript file for this script
  • images/ = Images used by the demos
  • css/ = Cascading style sheet for the demos

Simple demo

Type your search here:

  • Europe
    • Norway
    • Denmark
    • Sweden
    • England
    • Germany
    • Spain
  • Asia
    • China
    • Japan
    • South Korea
    • The Phillipines
  • North America
    • Canada
    • United States
    • Mexico
  • South America
    • Argentina
    • Brazil

Configuration

mootools

This script is based on the mootools library.

You can use the mootools.js file included in the download package, or you can download a version from www.mootools.net

Configure the script

The first thing you have to do in order to use this script is to include the mootools library and the dg-filter.js file on your page by using a <script> tag.

Example:

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="dg-filter.js"></script>

This script supports filtering of tables(<TABLE) and list elements(UL LI or OL LI).

In the demo above, I have a text field and an unordered list(UL LI):

The text field:

<lable for="searchField">Search: </lable> <input type="text" id="dgSearchField">

And the list:

<ul id="listToBeFiltered">
 <li><span class="listItem">Europe</span>
  <ul>
   <li><span class="listItem">Norway</span></li>
   <li><span class="listItem">Denmark</span></li>
   <li><span class="listItem">Sweden</span></li>
   <li><span class="listItem">England</span></li>
   <li><span class="listItem">Germany</span></li>
   <li><span class="listItem">Spain</span></li>
  </ul>
 </li>
 <li><span class="listItem">Asia</span>
  <ul>
   <li><span class="listItem">China</span></li>
   <li><span class="listItem">Japan</span></li>
   <li><span class="listItem">South Korea</span></li>
   <li><span class="listItem">The Phillipines</span></li>
  </ul>
 </li>
 <li><span class="listItem">North America</span>
  <ul>
   <li><span class="listItem">Canada</span></li>
   <li><span class="listItem">United States</span></li>
   <li><span class="listItem">Mexico</span></li>
  </ul>
 </li>
 <li><span class="listItem">South America</span>
  <ul>
   <li><span class="listItem">Argentina</span></li>
   <li><span class="listItem">Brazil</span></li>
  </ul>
 </li>
</ul>

I enable the filter feature by creating a new DG.Filter object:

<script type="text/javascript">
var filter = new DG.Filter({
  filterField : $('dgSearchField'),
  filterEl : $('listToBeFiltered'),
  xPathFilterElements : '.listItem',
  onMatchShowChildren : true
});
</script>

The object sent to the constructor of the DG.Filter object supports these options:

filterField:

A reference to the text/input field

filterEl:

A reference to the element which you want to filter, either an ul tag or a table tag. Remember that if you're using a table, it needs to have a <TBODY> element.

colIndexes:

An optional argument if you're filtering a table and only want's to apply the filter to some columns. Example:

var filter = new DG.Filter({
   filterField : $('filterField'),
   filterEl : $('myTable'),
   colIndexes : [0,2]
});

which applies filter to the first and third column.

xPathFilterElements:

This option is only required when you're filtering a list. It is used to specify the html tags of the text to be filtered. In the demo above, you will see that the text for the list is located inside <span class="listItem"> tags, example: <span class="listItem">Argentina</span>.

  • xPathFilterElements: 'a': The text to be filtered is located inside <a> tags.
  • xPathFilterElements: '.listItem': The text to be filtered is located inside a tag with class name .listItem, example: <span class="listItem">

onMatchShowChildren: (Optional)

Used only when you filter a list. When this option is to true, sub nodes will be visible when a match is found in a node above. Example: Search Phrase "Europe" will also display all the countries in Europe. With this option set to false, Europe will be visible, but the contries hidden.

txtNoMatchFound: (Optional) - Default: "No matches found"

Text displayed when there aren't any nodes matching the seach query.

listeners: (Optional)

This script supports two listeners:

  • beforefilter: Executed before the filter is executed
  • afterfilter: Executed after the filter has been executed

Example of use:

<script type="text/javascript">
var filter = new DG.Filter({
  filterField : $('dgSearchField'),
  filterEl : $('listToBeFiltered'),
  listeners : {
    beforefilter : function() { alert('Start filtering') },
    afterfilter : function() { alert('Filtering finished') }
  }

});
</script>

The static tree filter demo implements listeners. See the source code of that demo for more help.

Comments

Chintu
It is very useful but i want to use it in my aspx code, is it possible ??
Chintu at 08:40PM, 2011/06/15.
Thomas
Very smooth -- Is there any way to limit the search to the first column of a table? I'd like to use this for a list of acronyms, but don't want the filter to look in the definition column.
Thomas at 03:18PM, 2011/07/12.
Admin comment
DHTMLGoodies
Thomas,

This feature has been added.

Download the latest zip file and replace dg-filter.js with the new one.

You use the colIndexes attribute for this:

Example code:

var filter = new DG.Filter({
   filterField : $('filterField'),
   filterEl : $('myTable'),
   colIndexes : [0]
});
DHTMLGoodies at 02:01PM, 2011/07/13.
Thomas
OutSTANDing! Thanks so much.
Thomas at 02:52PM, 2011/07/20.
Ajith
AwEsOmE! Thanks for sharing
Ajith at 10:05AM, 2011/08/10.
12345
Hi!The tree filtering doesn't work with Chrome - it only filters the children on the first depth in the tree.
12345 at 10:56AM, 2011/09/29.
12345
I think this code line in the dg-filter.js file:var textProperty = document.body.innerText ? 'innerText' : 'textContent'; should be modified:var textProperty = 'textContent';I did this modification, and now it works in Chrome too.And, thanks for the code!
12345 at 12:38PM, 2011/09/29.
Zaman
Hi,Thanks for the great contribution. I need this system that will filter only the first characters and not the inside ones. For example, both the strings "England" and "Bengal" have the sub-string "eng". But, I want to find only the word(s) which has "eng" at the start (in this case, I want only the word "England" to be displayed and not "Bengal").Any idea please?Regards.Zelal
Zaman at 06:08PM, 2011/10/04.
Admin comment
DHTMLGoodies
Zaman wrote: #
Hi,

Thanks for the great contribution. I need this system that will filter only the first characters and not the inside ones. For example, both the strings "England" and "Bengal" have the sub-string "eng". But, I want to find only the word(s) which has "eng" at the start (in this case, I want only the word "England" to be displayed and not "Bengal").

Any idea please?

Regards.

Zelal

Hi,

This can be supported by changing some lines inside dg-filter.js

Instead of searching for strings where indexOf() is equal or larger than 0, search only where indexOf() == 0

example:

Change line 164 to:
return indexNode.branchText.indexOf(searchPhrase) ==0;

and line 171 to:
var match = indexNode.itemText.indexOf(searchPhrase) ==0;
DHTMLGoodies at 05:24PM, 2011/10/05.
Zelal
Thank you very much for your prompt kind reply. It was helpful.
Zelal at 05:52PM, 2011/10/05.
Nikolai
How add pagination when I load table contents from Mysql?The script no search in other pages.Please help.Thank you.
Nikolai at 02:29PM, 2011/10/13.
Matt
Thank you, this works fantastic.One further question though, if I want to have a button that makes it so that a single random list item is displayed, what variable should I give a random number value?Also, how do I give that variable that value in a <button> tag? Right now I have<input type="button" onclick='.listItem=Math.floor(Math.random()*.listToBeFiltered.length - 1)' value="I'm feeling lucky!">but nothing happens when I click it.ThanksMatt
Matt at 04:06PM, 2011/12/13.
Douzout
Hi, Thank you very much for this script !The list filtering works fine for me !One question though :I'd like the user to be able to click on a proposition whenever he wants in order to fill the input field with this clicked value. It works fine as long as we don't begin filtering the list. For example : in your demo, you enter "norw" > Only for countries remain. You click on "Norway" and the field is updated to "Norway". It seems that onclick actions in the span element does not work once the filtering has been triggered.Is it possible to keep active all "onclick" functions that would be in the <li><span onclick="xxx">blabla</span></li> elements ?Thanks for your help !
Douzout at 02:19PM, 2012/02/13.
vince
Hello everyone!I'm trying to include this script to filter a php table.I'm quite new at php and i can't get it to work proparly. This is the code i use :<HEAD> <title>Filtering an unobtrusive sortable table</title> <link rel="stylesheet" type="text/css" href="css/demo-2.css"></link> <script type="text/javascript" src="js/external/mootools.js"></script> <script type="text/javascript" src="js/demo-js/table.js"></script> <script type="text/javascript" src="js/dg-filter.js"></script></head><body><a href="http://www.dhtmlgoodies.com"><img src="/images/heading3.gif"></a><table cellpadding="0"> <tr> <td>Search: </td> <td><input type="text" id="filterField"></td> </tr></table><table id="myTable"> <?phpmysql_connect('localhost','root','');mysql_select_db('vliegtuigen') or die (mysql_error());$sql= mysql_query("SELECT * FROM aircrafts ");while ($row=mysql_fetch_object($sql)) { print("<tr> <td>$row->type</td> <td>$row->naam</td> <td>$row->fabrikant</td> <td>$row->kitnr</td> <td>$row->Magazine</td> </tr> "); } ?> <script type="text/javascript">initSortTable('myTable',Array('S','N','S','N','S'));var filter = new DG.Filter({ filterField : $('filterField'), filterEl : $('myTable')});</script></body>If i use the code without the script, it prints the table. But now it only prints :Search: "); } ?>$row->type $row->naam $row->fabrikant $row->kitnr $row->Magazinethanks in advance!
vince at 08:30AM, 2012/06/22.
Bowie
hi!Thank you for your demo.i have some question.can i use this filer with mysql database?
Bowie at 10:34AM, 2014/03/31.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com