javascript: Smart Select Lists
The nice thing about select lists is that if you click on the list and then hit a key, the list will jump down to the letter you selected. So if you have a list with a thousand entries, you can hit "M" to jump to the first entry that starts with "M" (case insensitive). The problem with this is that if you have a hundred entries that start with "M", you still have to scroll down and search for the value you want.
To provide a method of allowing the user to type in a value and have the select list auto-select the first matching value, you need to provide a text field above the select box. Note that the Javascript below will only work with single-select lists, not multiple-select lists.
The first example below will loop over the entire list to search for a matching string and is ideal for short lists for simplicity.
The second example below is for lists that contain hundreds or even thousands of values. It creates an array, one position for each letter of the alphabet, that stores the location of it's first occurrence. It'll also exit the search if it's searching for strings that start with a specified letter and it comes to a list option that starts with a letter that comes later in the alphabet. For example, if the user types "Eb" and there is no list entry that starts with "Eb", it'll stop searching when it hits a list entry that starts with "F".
Both of the examples will perform a case insensitive match.
Note: For best results, all selection lists should be sorted alphabetically.
Example HTML/CFML code:
Example 1, for short select lists
Code:
<script language="Javascript">
function SchKey(obj)
{
// event.keyCode holds the ASCII value of the key pressed
var k=event.keyCode;
// Only execute if user presses letter, number, or space
if ((k>=65 && k<=90) || (k>=95 && k<=122) || (k>=48 && k<=57) || k==32)
{
var SL=document.MyForm.SelectList;
var SearchStr=document.MyForm.SearchKey.value;
for (i=0; i<SL.options.length; i++)
{
if (SL.options[i].text.toUpperCase().substr(0,SearchStr.length)==SearchStr.toUpperCase())
{
// We have a match - highlight it and set the index so the loop will end
SL.selectedIndex=i;
i=SL.length + 1;
}
}
}
return true;
}
</script>
<form name="MyForm">
<input type="Text" name="SearchKey" onKeyUp="return SchKey()"><br>
<select name="SelectList" size="12">
<option>a</option><option>b</option><option>ba</option>
<option>c</option><option>d</option><option>da</option>
<option>e</option><option>f</option><option>fa</option>
<option>g</option><option>h</option><option>ha</option>
</select>
</form>
================================================== ===================
Example 2, for very long select lists
Code:
<script language="Javascript">
var StrInit=0;
var StrIdx=new Array(0);
StrIdx[0]=0;
for (i=1; i<=25; i++){StrIdx[i]=-1;}
function SchKey(obj)
{
// event.keyCode holds the ASCII value of the key pressed
var k=event.keyCode;
// Only execute if user presses letter, number, or space
if ((k>=65 && k<=90) || (k>=95 && k<=122) || (k>=48 && k<=57) || k==32)
{
if (StrInit == 0) InitStrArray();
var SL=document.MyForm.SelectList;
var SearchStr=document.MyForm.SearchKey.value;
var SearchKey=SearchStr.toUpperCase().charAt(0);
var StartAt=StrIdx[SearchStr.toUpperCase().charCodeAt(0) - 65];
for (i=StartAt; i<SL.options.length; i++)
{
if (SL.options[i].text.toUpperCase().substr(0,SearchStr.length)==SearchStr.toUpperCase())
{
// We have a match - highlight it and set the index so the loop will end
SL.selectedIndex=i;
i=SL.length + 1;
}
if (i < SL.length && SL.options[i].text.toUpperCase().charAt(0) != SearchKey)
{
// We've passed the letter we're looking for, means not found, exit loop
i=SL.length + 1;
}
}
}
return true;
}
function InitStrArray()
{
var SL=document.MyForm.SelectList;
var c=0;
for (i=0; i<SL.options.length; i++)
{
c=SL.options[i].text.toUpperCase().charCodeAt(0);
if (c >= 65 && c <= 90)
{
c=c - 65;
if (StrIdx[c] == -1) StrIdx[c]=i;
}
}
// Copy any undefined entries to match the preceding entry
for (i=1; i<=25; i++)
{
if (StrIdx[i] == -1) StrIdx[i]=StrIdx[i - 1];
}
// Set the flag indicating we've built the index
StrInit=1;
return;
}
</script>
<form name="MyForm">
<input type="Text" name="SearchKey" onKeyUp="return SchKey()"><br>
<select name="SelectList" size="12">
<option>b</option><option>d</option><option>f</option>
<option>h</option><option>hn</option><option>hd</option>
</select>
</form>