Download DhtmlGoodies Filter("DG Filter")

Demo 1 | Demo 2 | Demo 3

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:

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

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