'Autocompleting' Listbox?

Discussion in 'ASP General' started by CJM, May 23, 2005.

  1. CJM

    CJM Guest

    I would like to be able to use an autocompleting listbox - that is, one
    where you can select an item in the list by typing the first few characters;
    the standard IE listbox only responds to the first character.

    I'm happy to pay a few quid for a 3rd-party component/activex control if
    necessary but I imagine something equally good could be done with
    client-side code...

    Any suggestions?

    Note: This is for an intranet-based ASP application, where all clients are
    using IE6.

    Chris

    --

    [remove the obvious bits]
    CJM, May 23, 2005
    #1
    1. Advertising

  2. CJM wrote:
    > I would like to be able to use an autocompleting listbox - that is,
    > one where you can select an item in the list by typing the first few
    > characters; the standard IE listbox only responds to the first
    > character.
    > I'm happy to pay a few quid for a 3rd-party component/activex control
    > if necessary but I imagine something equally good could be done with
    > client-side code...
    >
    > Any suggestions?
    >
    > Note: This is for an intranet-based ASP application, where all
    > clients are using IE6.
    >


    See if you can adapt the dynamic listbox demo I wrote which is posted here:
    http://www.thrasherwebdesign.com/index.asp?pi=links&hp=links.asp&c=&a=clear

    Bob Barrows

    --
    Microsoft MVP - ASP/ASP.NET
    Please reply to the newsgroup. This email account is my spam trap so I
    don't check it very often. If you must reply off-line, then remove the
    "NO SPAM"
    Bob Barrows [MVP], May 23, 2005
    #2
    1. Advertising

  3. CJM

    McKirahan Guest

    "CJM" <> wrote in message
    news:#...
    > I would like to be able to use an autocompleting listbox - that is, one
    > where you can select an item in the list by typing the first few

    characters;
    > the standard IE listbox only responds to the first character.
    >
    > I'm happy to pay a few quid for a 3rd-party component/activex control if
    > necessary but I imagine something equally good could be done with
    > client-side code...
    >
    > Any suggestions?
    >
    > Note: This is for an intranet-based ASP application, where all clients are
    > using IE6.
    >
    > Chris
    >
    > --
    >
    > [remove the obvious bits]
    >



    For an IE-only solution, check out:

    // Cooking with JavaScript & DHTML
    // Bonus Recipe: Typing select Element Choices in IE for Windows
    // http://www.oreillynet.com/pub/a/javascript/2003/09/03/dannygoodman.html
    // http://www.oreillynet.com/lpt/a/4135
    McKirahan, May 23, 2005
    #3
  4. CJM

    CJM Guest

    Thanks Guys...

    I actually found a script which works in virtually the same way as the
    O'Reilly one, using javascript on the clientside rather than Bob's XML Data
    Island solution.

    I'm not sure which is the better approach, but I can guarantee the
    javascript is enabled in my target browsers, so I've gone for that option.
    I'm saving a few server roundtrips with no drawbacks that I can see...

    My code snippet is below. In a similar vein to the O'Reilly solution, I'm
    calling this procedure via the OnKeyPress event handler

    Chris

    Snippet:


    var toFind = ""; // Variable that acts as keyboard buffer
    var timeoutID = ""; // Process id for timer (used when stopping
    // the timeout)
    timeoutInterval = 250; // Milliseconds. Shorten to cause keyboard
    // buffer to be cleared faster
    var timeoutCtr = 0; // Initialization of timer count down
    var timeoutCtrLimit = 3 ; // Number of times to allow timer to count
    // down
    var oControl = ""; // Maintains a global reference to the
    // control that the user is working with.

    function listbox_onkeypress(){

    // This function is called when the user presses a key while focus is in
    // the listbox. It maintains the keyboard buffer.
    // Each time the user presses a key, the timer is restarted.
    // First, stop the previous timer; this function will restart it.
    window.clearInterval(timeoutID)

    // Which control raised the event? We'll need to know which control to
    // set the selection in.
    oControl = window.event.srcElement;

    var keycode = window.event.keyCode;
    if(keycode >= 32 ){
    // What character did the user type?
    var c = String.fromCharCode(keycode);
    c = c.toUpperCase();
    // Convert it to uppercase so that comparisons don't fail
    toFind += c ; // Add to the keyboard buffer
    find(); // Search the listbox
    timeoutID = window.setInterval("idle()", timeoutInterval);
    // Restart the timer
    }
    }

    function listbox_onblur(){
    // This function is called when the user leaves the listbox.

    window.clearInterval(timeoutID);
    resetToFind();
    }

    function idle(){
    // This function is called if the timeout expires. If this is the
    // third (by default) time that the idle function has been called,
    // it stops the timer and clears the keyboard buffer

    timeoutCtr += 1
    if(timeoutCtr > timeoutCtrLimit){
    resetToFind();
    timeoutCtr = 0;
    window.clearInterval(timeoutID);
    }
    }

    function resetToFind(){
    toFind = ""
    }


    function find(){
    // Walk through the select list looking for a match

    var allOptions = document.all.item(oControl.id);

    for (i=0; i < allOptions.length; i++){
    // Gets the next item from the listbox
    nextOptionText = allOptions(i).text.toUpperCase();

    // By default, the values in the listbox and as entered by the
    // user are strings. This causes a string comparison to be made,
    // which is not correct for numbers (1 < 11 < 2).
    // The following lines coerce numbers into an (internal) number
    // format so that the subsequent comparison is done as a
    // number (1 < 2 < 11).

    if(!isNaN(nextOptionText) && !isNaN(toFind) ){
    nextOptionText *= 1; // coerce into number
    toFind *= 1;
    }

    // Does the next item match exactly what the user typed?
    if(toFind == nextOptionText){
    // OK, we can stop at this option. Set focus here
    oControl.selectedIndex = i;
    window.event.returnValue = false;
    break;
    }

    // If the string does not match exactly, find which two entries
    // it should be between.
    if(i < allOptions.length-1){

    // If we are not yet at the last listbox item, see if the
    // search string comes between the current entry and the next
    // one. If so, place the selection there.

    lookAheadOptionText = allOptions(i+1).text.toUpperCase() ;
    if( (toFind > nextOptionText) &&
    (toFind < lookAheadOptionText) ){
    oControl.selectedIndex = i+1;
    window.event.cancelBubble = true;
    window.event.returnValue = false;
    break;
    } // if
    } // if

    else{

    // If we are at the end of the entries and the search string
    // is still higher than the entries, select the last entry

    if(toFind > nextOptionText){
    oControl.selectedIndex = allOptions.length-1 // stick it
    // at the end
    window.event.cancelBubble = true;
    window.event.returnValue = false;
    break;
    } // if
    } // else
    } // for
    } // function
    CJM, May 23, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. blenderdude
    Replies:
    0
    Views:
    747
    blenderdude
    Aug 3, 2003
  2. DC Gringo
    Replies:
    0
    Views:
    389
    DC Gringo
    Apr 6, 2004
  3. kent
    Replies:
    1
    Views:
    861
    Andrew de la Harpe
    May 3, 2004
  4. Simon Prince
    Replies:
    2
    Views:
    3,307
    =?Utf-8?B?TWljaGFlbCBUYXlsb3I=?=
    Oct 19, 2004
  5. Chris Kettenbach

    Listbox selection to populate another listbox?

    Chris Kettenbach, Jun 15, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    1,633
    Chris Kettenbach
    Jun 16, 2005
Loading...

Share This Page