Javascript: Generic Filter Function

I often have the need to filter items on websites. Previously I had different functions for filtering rows in tables, items in <div>-tags and so on. Now I created the following method which can be used in a generic way.

 * Filters items in the selected DOM nodes.
 * The items which sould be filtered based on their HTML content have to be marked with
 * the class "filterable".
 *@param context the Jquery selector for the element containing the items which should be filtered.
 *@param searchFieldID the ID of the field containing the search string.
 *@param itemSelector the JQuery selector for the object which should be filtered.
function filterItems(context, searchFieldID, itemSelector){

	var filterContext = $(context);
	var input = $(searchFieldID);

	filter = input.val().toUpperCase();
	filterContext.find(itemSelector).each(function( index ) {
		  if ($(this).html().toUpperCase().indexOf(filter) > -1) {
			  $(this).css("display", "");
		  } else {
			  $(this).css("display", "none");


Filter Hierarchical List

Using above function, we can create an <input> field as follows, which will filter a <ul>-list. This is how I use it on my sitemap.

<input id="filterField" onkeyup="filterItems('#children', '#filterField', 'li')" placeholder="Filter...">

<ul id="children"><li class="page_item page-item-2"><a href="">Sample Page</a></li>
<li class="page_item page-item-3"><a href="">Privacy Policy</a></li>
<li class="page_item page-item-6"><a href="">Blog</a></li>
<li class="page_item page-item-34"><a href="">Disclaimer of</a></li>
<li class="page_item page-item-52"><a href="">Example Gallery</a></li>

Filter Table

Here another example from my post-table regarding filtering tables.

<input id="filterField" onkeyup="filterItems('#posttable', '#filterField', 'tbody tr')" placeholder="Filter...">
<table id="posttable" class="table table-striped table-responsive">
<thead><tr><th> Date</th><th>Post</th><th>Tags</th></tr></thead>
<tr>  <td>2018-12-28 11:45:20  </td><td><a href="#">WordPress: Migrate from Localhost to Server</a></tr>
<tr>  <td>2018-12-28 11:44:37  </td><td><a href="#">Another Post</a></td></tr>
<tr>  <td>2018-12-25 21:16:54  </td><td><a href="#">Hello world!</a></td></tr>

Filter Items in <div>

You can as well use it for custom items. Just create a container with the items you want to filter. You can use a class like “filterable” to mark the items in case you use various elements.
The following example is from my tag list.

<input id="filterField" onkeyup="filterItems('#taglist', '#filterField', '.filterable')" placeholder="Filter...">

<div id="taglist">
	<a class="btn btn-info filterable" href="">database</a>
	<a class="btn btn-info filterable" href="">development</a>
	<a class="btn btn-info filterable" href="">htaccess</a>
	<a class="btn btn-info filterable" href="">issues</a>
	<a class="btn btn-info filterable" href="">performance</a>
	<a class="btn btn-info filterable" href="">wp-config</a>



Leave a Reply

Your email address will not be published.

Comments(1) says: