Click here to Skip to main content
Click here to Skip to main content
Go to top

AutoSearch SELECT tag

, 20 Mar 2003
Rate this:
Please Sign up or sign in to vote.
Clientside JavaScript for AutoSearching HTML SELECT tags

Introduction

If you spend any time surfing the web you will find <select> lists. In all cases I've encountered the default single character searches are used to help you "quickly" find the list item you want. As an example, to reach North Carolina in a list of states you would type "N" which takes you to Nebraska. "O" will take you to Ohio, so you will quickly learn to type "N" and down arrow 6 times to get "North Carolina".

I think we can do better.

An auto searching <select> list would allow us to type "No" and automatically get "North Carolina". Mississippi and Arkansas are other good examples. A few lines of client side JavaScript can solve this nuisance. I've included examples of both types of <select> lists for USA states below so give them a try.

Standard Non Searching Select List

<SELECT name=stateNonSrch> <OPTION value=AL selected>Alabama</OPTION> <OPTION value=AK>Alaska</OPTION> <OPTION value=AZ>Arizona</OPTION> <OPTION value=AR>Arkansas</OPTION> <OPTION value=CA>California</OPTION> <OPTION value=CO>Colorado</OPTION> <OPTION value=CT>Connecticut</OPTION> <OPTION value=DE>Delaware</OPTION> <OPTION value=DC>District of Columbia</OPTION> <OPTION value=FL>Florida</OPTION> <OPTION value=GA>Georgia</OPTION> <OPTION value=HI>Hawaii</OPTION> <OPTION value=ID>Idaho</OPTION> <OPTION value=IL>Illinois</OPTION> <OPTION value=IN>Indiana</OPTION> <OPTION value=IA>Iowa</OPTION> <OPTION value=KS>Kansas</OPTION> <OPTION value=KY>Kentucky</OPTION> <OPTION value=LA>Louisiana</OPTION> <OPTION value=ME>Maine</OPTION> <OPTION value=MD>Maryland</OPTION> <OPTION value=MA>Massachusetts</OPTION> <OPTION value=MI>Michigan</OPTION> <OPTION value=MN>Minnesota</OPTION> <OPTION value=MS>Mississippi</OPTION> <OPTION value=MO>Missouri</OPTION> <OPTION value=MT>Montana</OPTION> <OPTION value=NE>Nebraska</OPTION> <OPTION value=NV>Nevada</OPTION> <OPTION value=NH>New Hampshire</OPTION> <OPTION value=NJ>New Jersey</OPTION> <OPTION value=NM>New Mexico</OPTION> <OPTION value=NY>New York</OPTION> <OPTION value=NC>North Carolina</OPTION> <OPTION value=ND>North Dakota</OPTION> <OPTION value=OH>Ohio</OPTION> <OPTION value=OK>Oklahoma</OPTION> <OPTION value=OR>Oregon</OPTION> <OPTION value=PA>Pennsylvania</OPTION> <OPTION value=RI>Rhode Island</OPTION> <OPTION value=SC>South Carolina</OPTION> <OPTION value=SD>South Dakota</OPTION> <OPTION value=TN>Tennessee</OPTION> <OPTION value=TX>Texas</OPTION> <OPTION value=UT>Utah</OPTION> <OPTION value=VT>Vermont</OPTION> <OPTION value=VA>Virginia</OPTION> <OPTION value=WA>Washington</OPTION> <OPTION value=WV>West Virginia</OPTION> <OPTION value=WI>Wisconsin</OPTION> <OPTION value=WY>Wyoming</OPTION></SELECT>

AutoSearching Select List

<INPUT type=hidden name=keys> <SELECT onkeypress=selectKeyPress(); onkeydown=selectKeyDown(); onblur=clr(); onfocus=clr(); name=state> <OPTION value=AL selected>Alabama</OPTION> <OPTION value=AK>Alaska</OPTION> <OPTION value=AZ>Arizona</OPTION> <OPTION value=AR>Arkansas</OPTION> <OPTION value=CA>California</OPTION> <OPTION value=CO>Colorado</OPTION> <OPTION value=CT>Connecticut</OPTION> <OPTION value=DE>Delaware</OPTION> <OPTION value=DC>District of Columbia</OPTION> <OPTION value=FL>Florida</OPTION> <OPTION value=GA>Georgia</OPTION> <OPTION value=HI>Hawaii</OPTION> <OPTION value=ID>Idaho</OPTION> <OPTION value=IL>Illinois</OPTION> <OPTION value=IN>Indiana</OPTION> <OPTION value=IA>Iowa</OPTION> <OPTION value=KS>Kansas</OPTION> <OPTION value=KY>Kentucky</OPTION> <OPTION value=LA>Louisiana</OPTION> <OPTION value=ME>Maine</OPTION> <OPTION value=MD>Maryland</OPTION> <OPTION value=MA>Massachusetts</OPTION> <OPTION value=MI>Michigan</OPTION> <OPTION value=MN>Minnesota</OPTION> <OPTION value=MS>Mississippi</OPTION> <OPTION value=MO>Missouri</OPTION> <OPTION value=MT>Montana</OPTION> <OPTION value=NE>Nebraska</OPTION> <OPTION value=NV>Nevada</OPTION> <OPTION value=NH>New Hampshire</OPTION> <OPTION value=NJ>New Jersey</OPTION> <OPTION value=NM>New Mexico</OPTION> <OPTION value=NY>New York</OPTION> <OPTION value=NC>North Carolina</OPTION> <OPTION value=ND>North Dakota</OPTION> <OPTION value=OH>Ohio</OPTION> <OPTION value=OK>Oklahoma</OPTION> <OPTION value=OR>Oregon</OPTION> <OPTION value=PA>Pennsylvania</OPTION> <OPTION value=RI>Rhode Island</OPTION> <OPTION value=SC>South Carolina</OPTION> <OPTION value=SD>South Dakota</OPTION> <OPTION value=TN>Tennessee</OPTION> <OPTION value=TX>Texas</OPTION> <OPTION value=UT>Utah</OPTION> <OPTION value=VT>Vermont</OPTION> <OPTION value=VA>Virginia</OPTION> <OPTION value=WA>Washington</OPTION> <OPTION value=WV>West Virginia</OPTION> <OPTION value=WI>Wisconsin</OPTION> <OPTION value=WY>Wyoming</OPTION></SELECT>

How it works

Basically the javascript code driving the AutoSearching <select> above records each keystroke in a hidden input tag and uses ALL keystrokes to search for a matching Option in the list. A few questions may come to mind, such as "How to you clear previously captured keystrokes?". The onBlur() and onFocus() events clear previous keystrokes but what about starting a new search without moving focus from the <select> list?. In this case I used the Delete key. I decided not to use BackSpace key for this since many browsers use BackSpace to navigate Back.

How to use AutoSearch <select>

First, add selectKeyDown(), selectKeyPress(), and clr() javascript functions to your page as found in the source code download, or simply View->Source for this page.

Next, add onBlur(), onFocus(), onKeyPress(), and onKeyDown() event handlers to your <select> tags

Last, add a hidden input tag named "keys" to store the previous keystrokes

A little debugging in case you are an occasional fumble finger typist like me and your <select> tags will never be the same.

The Code

// Java Script to Handle AutoSearch
function selectKeyDown()
{
    // Delete Key resets previous search keys
    if(window.event.keyCode == 46)
        clr();
}
function selectKeyPress()
{
    // Notes:
    //    1) previous keys are cleared onBlur/onFocus and with Delete key
    //    2) if the search doesn't find a match, this returns to normal 1 key 
    //        search setting returnValue = false below for ALL cases will 
    //        prevent default behavior
    
    //TODO:
    //    1) add Netscape handling
    

    var sndr = window.event.srcElement;
    var pre = this.document.all["keys"].value;
    var key = window.event.keyCode;
    var char = String.fromCharCode(key);

    // "i" -> ignoreCase
    var re = new RegExp("^" + pre + char, "i"); 

    for(var i=0; i<sndr.options.length; i++)
    {
        if(re.test(sndr.options[i].text))
        {
            sndr.options[i].selected=true;
            document.all["keys"].value += char;
            window.event.returnValue = false;
            break;
        }
    }
}
function clr()
{
    document.all["keys"].value = "";
}

Tested Browsers

  1. Internet Explorer 6.0.2800
  2. Mozilla 1.2.1

TODO

  1. Add Netscape Navigator handling.
  2. Test other and older browsers.
  3. Let me here your comments on this.

History

Release 03/02/2003

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Oscar Bowyer
Web Developer
United States United States
No Biography provided

Comments and Discussions

 
GeneralCool But not in IE PinmemberJanaka Lakmal27-Nov-07 4:30 
Questiona search technique with a textbox and a listbox Pinmemberkamalika_kk19-Jul-06 2:46 
Generalplz ignore this message PinmemberSasan3-Dec-05 1:27 
GeneralSo Cool~ PinmemberHyosik, Kim7-Jul-05 22:02 
GeneralSearching in a drop-down PinsussGibran Castillo24-May-05 7:42 
GeneralRe: Searching in a drop-down PinsussAnonymous26-May-05 12:29 
GeneralTest for expanded select PinmemberEricRapp19-May-05 11:48 
AnswerRe: Test for expanded select PinmemberBandu Patil11-Mar-06 23:56 
GeneralGood Job done Pinsussanup2anup20-Jan-05 3:17 
GeneralVery good Pinmemberfelipedr6-Jan-05 0:16 
Generalnice trick PinmemberChristian Kiefer30-Apr-04 5:00 
Generalbackspace PinmemberFocusQueen23-Jan-04 4:43 
AnswerRe: backspace PinmemberBandu Patil14-Aug-04 22:17 
GeneralCan't get OnChange() event Pinsussrutvij20-Jan-04 8:26 
GeneralRe: Can't get OnChange() event Pinsussnprash16-Aug-04 4:17 
Generalanother quick mod PinsussAnonymous14-Nov-03 7:26 
GeneralMy modified version PinsussPiedPiper697123-Oct-03 16:45 
GeneralCool, but.. Pinmemberlaminator10-Nov-03 5:32 
GeneralRe: My modified version Pinsussanup agrawal20-Jan-05 3:26 
GeneralRe: My modified version Pinsussanup agrawal20-Jan-05 3:26 
GeneralRe: My modified version PinmemberJason Robbins21-Jul-05 5:01 
GeneralCool, but hidden field is unnecessary Pinmembersilentdoug22-Jul-03 12:37 
GeneralRe: Cool, but hidden field is unnecessary Pinmemberplegg27-Aug-03 6:29 
GeneralVery good. EOL Pinmember.S.Rod.21-Mar-03 23:11 
GeneralCool PinmemberSteve McLenithan21-Mar-03 11:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140926.1 | Last Updated 21 Mar 2003
Article Copyright 2003 by Oscar Bowyer
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid