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="http://www.xresch.com/sample-page/">Sample Page</a></li>
<li class="page_item page-item-3"><a href="http://www.xresch.com/privacy-policy/">Privacy Policy</a></li>
<li class="page_item page-item-6"><a href="http://www.xresch.com/blog/">Blog</a></li>
<li class="page_item page-item-34"><a href="http://www.xresch.com/disclaimer-of-www-xresch-com/">Disclaimer of www.xresch.com</a></li>
<li class="page_item page-item-52"><a href="http://www.xresch.com/example-gallery/">Example Gallery</a></li>
[...]
</ul>

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>
<tbody>
<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>
</tbody></table>

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="http://www.xresch.com/tag/database/">database</a>
	<a class="btn btn-info filterable" href="http://www.xresch.com/tag/development/">development</a>
	<a class="btn btn-info filterable" href="http://www.xresch.com/tag/htaccess/">htaccess</a>
	<a class="btn btn-info filterable" href="http://www.xresch.com/tag/issues/">issues</a>
	<a class="btn btn-info filterable" href="http://www.xresch.com/tag/performance/">performance</a>
	<a class="btn btn-info filterable" href="http://www.xresch.com/tag/wp-config/">wp-config</a>
</div>