Javascript Text Filter

This Javascript function is designed to filter the options shown in a multi-select field based on a value entered in an input field.   This is a screen capture of the resulting HTML:

So we have the following multi-select options:

---------------------------------------------------------

blackhat seo

seo

seo consulting

seo rules

If we type “seo” into the input field, we only want to display:

----------------------------------------------------------------------------------

seo

seo consulting

seo rules

because those are the only entries beginning with “seo”.  As the user deletes characters, we want the entries to be restored as appropriate, and we want a button to reset the filter (equivalent to deleting all the characters in the search field).

I wrote this function for siteolytics.com.  It is used to filter trackable keywords, but of course it can be used to filter down any sort of selectable list (and could easily be modified to work with any other type of list as well).  

Specifically, it is used on the following Siteolytics page:

http://www.siteolytics.com/seo/search/addkeyword

But you need to create an account and enter a site you want to track before you can reach it.  Of course if you are actually interested in tracking SEO on your site, then it's well worth the effort as Siteolytics has a lot of nifty tracking features for all things SEO related.  But otherwise, you can get the idea from the attached screenshot.

It should be noted that Siteolytics runs on cakePHP.  So I used the forms helper when creating the actual HTML ( hence the odd naming convention).

There are four HTML elements involved:

1. A text box to enter the search phrase
2. A reset button to clear the search phrase
3. A multi-select form to display the result
4. A hidden master list of items we use to restore the multi-select box

The html for the search text is:

-----------------------------------------------------------------

<input name="data[Search][keywordFilter]" value="" onkeyup="filterElements()" size="25" type="text" id="SearchKeywordFilter">

The html for the reset button is:

--------------------------------------------------------------------

<input type="button" id="btnClearFilter" onclick="clearFilter()" value="Clear Filter">

The multi-select field where we display the result:

---------------------------------------------------------------------------------

<select name="data[Search][trackedKeywords][]" size="5" multiple="multiple" style="width:100%;" id="SearchTrackedKeywords">

<option value="0">blackhat seo</option>

<option value="1">seo</option>

<option value="2">seo consulting</option>

<option value="3">seo rules</option>

</select>

The master list of items we use to restore filtered items:

------------------------------------------------------------------

<select name="data[Search][masterKeywords]" size="1" style="display:none" id="SearchMasterKeywords">

<option value="0">blackhat seo</option>

<option value="1">seo</option>

<option value="2">seo consulting</option>

<option value="3">seo rules</option>

</select>

The required Javascript functions are only two.  One, filterElements, both deletes and restores items in response to the text input in the search field, and other function, clearFilter, resets the filter and restores all the items.

We are detecting the “onkeyup” event on the search box which fires the “filterElements” Javascript function:

-----------------------------------------------------

function  filterElements () {

   var index;

   var filterBox = document.getElementById('SearchKeywordFilter');

   var filterVal = filterBox.value;

   var keywordList = document.getElementById('SearchTrackedKeywords');

   var keywordListCount = keywordList.options.length;

   var masterList = document.getElementById('SearchMasterKeywords');

   var masterListCount = masterList.options.length;

   var counter = 0;

   for (index=0; index < masterListCount; index++) {

       var text = masterList.options[index].text.toLowerCase();

       if (text.indexOf(filterVal) == 0) {  // == 0 means we found that string

          if (counter >= keywordListCount) {

             var option = document.createElement("option");

             keywordList.add(option);

          }

          keywordList.options[counter].text = masterList.options[index].text;

          counter++;

       }

   }

   for (index=counter; index < keywordListCount; index++) {  // null out any remaining

                                  // select options beyond the end of our current list

       keywordList.options[counter] = null;

   }

}

We have a function that resets the options list by copying the master list back into the working selection list:

-------------------------------------------

function  clearFilter () {

   var index;

   var filterBox = document.getElementById('SearchKeywordFilter');

   var keywordList = document.getElementById('SearchTrackedKeywords');

   var keywordListCount = keywordList.options.length;

   var masterList = document.getElementById('SearchMasterKeywords');

   var masterListCount = masterList.options.length;

   filterBox.value = '';

   for (index=keywordListCount; index < masterListCount; index++) { // add back the options

                                                       // we've nulled out with the filter

      var option = document.createElement("option");

      keywordList.add(option);

   }

   for (index=0; index < masterListCount; index++) {

      keywordList.options[index].text = masterList.options[index].text; // set the text of 

               // the existing options and any newly created ones to match the master list

   }

}