Click here to Skip to main content
12,359,320 members (34,055 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

139.2K views
1.2K downloads
36 bookmarked
Posted

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

AutoSearching Select List

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

You may also be interested in...

Comments and Discussions

 
GeneralCool But not in IE Pin
Janaka Lakmal27-Nov-07 4:30
memberJanaka Lakmal27-Nov-07 4:30 
Questiona search technique with a textbox and a listbox Pin
kamalika_kk19-Jul-06 2:46
memberkamalika_kk19-Jul-06 2:46 
Generalplz ignore this message Pin
Sasan3-Dec-05 1:27
memberSasan3-Dec-05 1:27 
GeneralSo Cool~ Pin
Hyosik, Kim7-Jul-05 22:02
memberHyosik, Kim7-Jul-05 22:02 
GeneralSearching in a drop-down Pin
Gibran Castillo24-May-05 7:42
sussGibran Castillo24-May-05 7:42 
GeneralRe: Searching in a drop-down Pin
Anonymous26-May-05 12:29
sussAnonymous26-May-05 12:29 
GeneralTest for expanded select Pin
EricRapp19-May-05 11:48
memberEricRapp19-May-05 11:48 
AnswerRe: Test for expanded select Pin
Bandu Patil11-Mar-06 23:56
memberBandu Patil11-Mar-06 23:56 
GeneralGood Job done Pin
anup2anup20-Jan-05 3:17
sussanup2anup20-Jan-05 3:17 
GeneralVery good Pin
felipedr6-Jan-05 0:16
memberfelipedr6-Jan-05 0:16 
Generalnice trick Pin
Christian Kiefer30-Apr-04 5:00
memberChristian Kiefer30-Apr-04 5:00 
Generalbackspace Pin
FocusQueen23-Jan-04 4:43
memberFocusQueen23-Jan-04 4:43 
AnswerRe: backspace Pin
Bandu Patil14-Aug-04 22:17
memberBandu Patil14-Aug-04 22:17 
GeneralCan't get OnChange() event Pin
rutvij20-Jan-04 8:26
sussrutvij20-Jan-04 8:26 
GeneralRe: Can't get OnChange() event Pin
nprash16-Aug-04 4:17
sussnprash16-Aug-04 4:17 
Generalanother quick mod Pin
Anonymous14-Nov-03 7:26
sussAnonymous14-Nov-03 7:26 
GeneralMy modified version Pin
PiedPiper697123-Oct-03 16:45
sussPiedPiper697123-Oct-03 16:45 
GeneralCool, but.. Pin
laminator10-Nov-03 5:32
memberlaminator10-Nov-03 5:32 
GeneralRe: My modified version Pin
anup agrawal20-Jan-05 3:26
sussanup agrawal20-Jan-05 3:26 
GeneralRe: My modified version Pin
anup agrawal20-Jan-05 3:26
sussanup agrawal20-Jan-05 3:26 
GeneralRe: My modified version Pin
Jason Robbins21-Jul-05 5:01
memberJason Robbins21-Jul-05 5:01 
GeneralCool, but hidden field is unnecessary Pin
silentdoug22-Jul-03 12:37
membersilentdoug22-Jul-03 12:37 
GeneralRe: Cool, but hidden field is unnecessary Pin
plegg27-Aug-03 6:29
memberplegg27-Aug-03 6:29 
GeneralVery good. EOL Pin
.S.Rod.21-Mar-03 23:11
member.S.Rod.21-Mar-03 23:11 
GeneralCool Pin
Steve McLenithan21-Mar-03 11:05
memberSteve McLenithan21-Mar-03 11:05 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.160621.1 | Last Updated 21 Mar 2003
Article Copyright 2003 by Oscar Bowyer
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid