[Javascript] Searching a drop-down list.

[Mike Dougherty]

   In a fat-client desktop interface to SQL data, the 'best practice' would be to allow the user 
to enter their search criteria, then retrieve the results for display.  In the case of potentially 
millions of records narrowing on the first keypress to hundreds of thousands, the lag to retrieve 
and display the results is too prohibitive.  
   I have to admit this incremental searching routine gives immediate feedback at each keystroke 
and i'd give it 'props' for being interactive and interesting.  If you ever had so much data that 
it was not scaling well (large dataset + slow machine, resource issues, etc)  then you might adopt 
a plainer approach.  This is not a tweak suggestion, but another option to consider for management 
of really huge datasets.  

   Overall, it's pretty cool...  Do you have a collection of wiki pages displaying those 
techniques in your bag of tricks that you care to share?

On Thu, 06 Jan 2005 10:25:18 -0500 (EST)
  "Shawn Milo" <ShawnMilo at runbox.com> wrote:
>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
>_______________________________________________
>Javascript mailing list
>Javascript at LaTech.edu
>https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
>__________________________________________________________
>This message was scanned by ATX
>10:26:47 AM ET - 1/6/2005