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:
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:
- A text box to enter the search phrase
- A reset button to clear the search phrase
- A multi-select form to display the result
- 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
}
}
