[Javascript] Searching a drop-down list.

[Shawn Milo]

I wrote an ASP call center application. There are drop-down lists to select
the caller, issue, and other things. The caller and issue lists, in particular,
are rather large. 

A while back, I put a span above each, and if the user clicked in a drop-down
and then started typing, the span would show the letters they had typed, and
would bring the select box to the first match. The problem with this is that,
to clear the span, they had to click the select box. Of course, everyone 
(including me) hit the backspace when we wanted to remove the last letter, 
which had the wonderful effect of doing a page-back in the browser. 
I suppose I could have disabled that key with JS, but I had a better idea.

I replaced the span with a text box. This works wonderfully, except for one
annoyance. Imagine a select with, say, 300 names in it. You want Brian Smith.
You type 'Smith,' and get 'Smith, Andy,' because he's higher up in the list. You
type 'Brian' and get 'Miller, Brian' for the same reason. What I wanted was a way
to narrow the entire list down to the few entries containing 'Brian.' And, of course,
it would have to restore all the stuff I removed during the search -- without 
refreshing the page.

Here's what I came up with:

The ASP writes a Javascript array that looks something like this:

<script type='text/javascript'>
iCallers = new Array();
iCallers[iCallers.length] = new Array('23035', 'Smith, Brian');
iCallers[iCallers.length] = new Array('22800', 'Jackson, Andrew');
iCallers[iCallers.length] = new Array('22967', 'Heinlein, Robert');
iCallers[iCallers.length] = new Array('22769', 'Jordan, Robert');
iCallers[iCallers.length] = new Array('22900', 'Koontz, Dean');
iCallers[iCallers.length] = new Array('22904', 'Franklin, Benjamin');
iCallers[iCallers.length] = new Array('22975', 'Lebowski, Jeffrey');
iCallers[iCallers.length] = new Array('22844', 'Wright, James');
</script>

Then I have a text box above the select in question, with the following
snippet included:

onKeyUp="searchSelect(this.value, document.CC_ADD.drpCaller, iCallers);"
The array is specified, because I have an 'iCallers' array, an 'iIssues' array, etc.

Here are the JS functions. The first one narrows down the select, and the
second restores it. The search is case-insensitive. It only refreshes the
select after the text box has had all characters removed -- otherwise, 
every backspace key would have to completely clear and restore the
drop-down. As it is, it's about as optimized as I was able to make it.

I considered, and rejected, doing a time thing, where the onKeyUp would
trigger a 2-second delay, instead of running the function each time. I didn't
want the users who noticed the pause to be confused, and the function runs
extremely fast after the first letter or two, because the list shrinks nicely.

If anyone can think of any improvements, please post!





function searchSelect(strSearch, drpBox, js_array){

   var x = 0;

   if (strSearch == ''){
      restoreSelect(drpBox, js_array);
   }else{

      for (x = 0; x < drpBox.length; x++){
         if (drpBox[x].text.toUpperCase().indexOf(strSearch.toUpperCase()) == -1){
            drpBox.remove(x);
            x -= 1;
         }

      }

   }
}


function restoreSelect(drpBox, js_array){

   var x = 0;

   while (drpBox.length){
      drpBox.remove(0);
   }

   for (x=0; x<js_array.length;x++){
      drpBox.options[x] = new Option(js_array[x][1], js_array[x][0])
   }

}


Shawn