Click here to Skip to main content
15,869,940 members
Articles / Web Development / HTML
Article

Auto select (Incremental search, Auto-complete) an item from a dropdown as user keys in

Rate me:
Please Sign up or sign in to vote.
4.35/5 (16 votes)
23 Sep 2008CPOL2 min read 104.5K   878   20   30
HTML lacks the auto-select feature for dropdowns. Users familiar with desktop applications expect browsers to select the correct item from a dropdown list as they key in. I am trying to solve this using simple JavaScript.

Sample screenshot

Introduction

Normally, HTML does not support nearest match. It always treats each key stroke as the starting of a new search. But, that is useless. If I type 'C', it will go to the first item that starts with C; if I type 'O' immediately, it will go to the first item that starts with 'O'. But in this implementation, it will go to 'CO'.

If the user misspelled, the user can use the backspace key to delete the char 'O' and type another letter to select another item. The user can wait for 3 seconds to start a fresh search, or use backspace to delete the entire search key, or shift delete to restart again.

It finds the nearest possible match. So, it does not need to be in any order.

  1. Just include the .js file in the target HTML:
  2. HTML
    <script language="JavaScript" src="dropdown.js"></script>
  3. Add these events to your dropdown field:
  4. HTML
    onfocus="this.enteredText='';" onkeydown="return handleKey();" 
      onkeyup="event.cancelbubble=true;return false;" onkeypress="return selectItem();"

    For example:

    HTML
    <select name="test" onfocus="this.enteredText='';" onkeydown="return handleKey();" 
      onkeyup="event.cancelbubble=true;return false;" onkeypress="return selectItem();">
    • onfocus resets the search text.
    • onkeydown handles certain keys (left, right, top, down, shift, delete, backspace) and takes the appropriate action.
    • onkeypress handles the selection of an item from the list.
    • onkeyup ignores the event as onkeypress has already handled the key stroke.
  5. Open the HTML file using IE.
  6. Type 'a', it will take you to the first item that starts with 'a'. Then, type 'b'; this will take you to the first item that starts with 'ab'. This uses a nearest match algorithm. So, the list does not need to be in any order.
    1. The user can search a string within a dropdown list.
    2. It automatically selects the list item that starts with the search key.
    3. The user can use backspace to delete a char before the current index from the search key.
    4. The user can use the delete button to delete a char after the current index from the search key.
    5. The user can use left or right arrow keys to move back and forth over the search key, and use delete or backspace to delete a char; the script will automatically find the item in the list, or enter a new char from the current index.
    6. Pressing the Shift and Delete keys will remove the search key and start over the search again.
    7. The user can see the search key on the Windows status bar. It shows the current index too.

I am adding Hugh Nelson's suggestion also here, so that it is available for every one. If you want to change all the dropdowns in a page to have this functionality, call the following in the onload event:

JavaScript
function setSelectEvents() {
    // set javascript event attributes
    // for all select items in the current page
    var selects = document.getElementsByTagName("select");
    var arrOnfocus = new Array(); // array of onfocus functions
    var arrOnkeydown = new Array(); // array of onkeydown functions
    var arrOnkeyup = new Array(); // array of onkeyup functions
    var arrOnkeypress = new Array(); // array of onkeypress functions

    for (var i = 0; i < selects.length; i++) {
        // we need to ensure that
        // we don't overwrite any existing function

        // save index to array as an element attribute
        // (using i directly did not work)
        selects[i].title = i;

        // onfocus
        if(typeof(selects[i].onfocus) == 'function') {
        // there is a pre-existing function
            // save pre-existing function
            arrOnfocus[selects[i].title] = selects[i].onfocus;
            selects[i].onfocus = 
              function() { arrOnfocus[this.title](); this.enteredText=''; }
              // set event to call our code plus the pre-existing function
        }
        else { // there is no pre-existing function
            selects[i].onfocus = function() { this.enteredText=''; }
        }

        // onkeydown
        if(typeof(selects[i].onkeydown) == 'function') {
        // there is a pre-existing function
            // save pre-existing function
            arrOnkeydown[selects[i].title] = selects[i].onkeydown;
            selects[i].onkeydown = 
              function() { arrOnkeydown[this.title](); return handleKey(); }
              // set event to call our code plus the pre-existing function
        }
        else { // there is no pre-existing function
            selects[i].onkeydown = function() { return handleKey(); }
        }

        // onkeyup
        if(typeof(selects[i].onkeyup) == 'function') {
        // there is a pre-existing function
            // save pre-existing function
            arrOnkeyup[selects[i].title] = selects[i].onkeyup;
            selects[i].onkeyup = 
              function() { arrOnkeyup[this.title](); 
                           event.cancelbubble=true;return false; }
              // set event to call our code plus the pre-existing function
        }
        else { // there is no pre-existing function
            selects[i].onkeyup = 
              function() { event.cancelbubble=true;return false; }
        }

        // onkeypress
        if(typeof(selects[i].onkeypress) == 'function') {
        // there is a pre-existing function
            // save pre-existing function
            arrOnkeypress[selects[i].title] = selects[i].onkeypress;
            selects[i].onkeypress = 
               function() { arrOnkeypress[this.title](); return selectItem(); }
               // set event to call our code plus the pre-existing function
        }
        else { // there is no pre-existing function
            selects[i]. &#246;nkeypress = function() { return selectItem(); }
        }
    }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
Fourteen years of progressive experience in Software Product Development, tactical planning, project and client management, demonstrated success in leadership, critical thinking, problem solving and analysis. Diverse knowledge and experience with multiple development methodologies, reengineering, software engineering, and integration of heterogeneous systems.

Comments and Discussions

 
QuestionRe: Incremental Search Pin
kamini42818-Aug-06 16:08
kamini42818-Aug-06 16:08 
AnswerRe: Incremental Search Pin
senthilnathan karuppaiah18-Aug-06 16:30
senthilnathan karuppaiah18-Aug-06 16:30 
QuestionRe: Incremental Search Pin
kamini42818-Aug-06 16:44
kamini42818-Aug-06 16:44 
AnswerRe: Incremental Search Pin
senthil karuppaiah18-Aug-06 16:57
senthil karuppaiah18-Aug-06 16:57 
AnswerRe: Incremental Search Pin
kamini42819-Aug-06 15:59
kamini42819-Aug-06 15:59 

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.