Dropdown on Textbox using ASP

Discussion in 'ASP General' started by A P, Jun 8, 2005.

  1. A P

    A P Guest

    Hi!

    I have seen some techniques like this on the web. Currently, I'm using Combo
    box which values came from database table. One disadvantage is when the
    combo box have lots of values, users are complaining since you cannot use
    keyboard to search the value that is needed. Hope you might help me.

    regards,

    Me
     
    A P, Jun 8, 2005
    #1
    1. Advertising

  2. A P

    CJM Guest

    "A P" <> wrote in message
    news:%...
    > Hi!
    >
    > I have seen some techniques like this on the web. Currently, I'm using
    > Combo
    > box which values came from database table. One disadvantage is when the
    > combo box have lots of values, users are complaining since you cannot use
    > keyboard to search the value that is needed. Hope you might help me.
    >
    > regards,
    >
    > Me
    >
    >


    Use a <Select> tag as normal, but add a couple of event handlers in as
    follows:

    <select name="field1" onkeypress="listbox_onkeypress();"
    onblur="listbox_onblur();">
    <option>1</option>
    ...
    <option>n</option>
    </select>

    Then bang the following script in to a .js file and link it in... and hey
    presto... you have autocomplete functionality.

    // Auto-select listbox

    // This script and the listbox on this page illustrates one
    // way to create an "auto-complete" listbox, where the

    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


    Hope this helps...

    Chris
     
    CJM, Jun 8, 2005
    #2
    1. Advertising

  3. Looks nice CJM.
    I had written something quick for a couple of my Combos but I'll take a
    close look at your functions and may just integrate it in my pages.
    Of course I'll give you full credit but no paycheck. :)
    Thanks for the code.

    "CJM" <> wrote in message
    news:...
    >
    > "A P" <> wrote in message
    > news:%...
    >> Hi!
    >>
    >> I have seen some techniques like this on the web. Currently, I'm using
    >> Combo
    >> box which values came from database table. One disadvantage is when the
    >> combo box have lots of values, users are complaining since you cannot use
    >> keyboard to search the value that is needed. Hope you might help me.
    >>
    >> regards,
    >>
    >> Me
    >>
    >>

    >
    > Use a <Select> tag as normal, but add a couple of event handlers in as
    > follows:
    >
    > <select name="field1" onkeypress="listbox_onkeypress();"
    > onblur="listbox_onblur();">
    > <option>1</option>
    > ...
    > <option>n</option>
    > </select>
    >
    > Then bang the following script in to a .js file and link it in... and hey
    > presto... you have autocomplete functionality.
    >
    > // Auto-select listbox
    >
    > // This script and the listbox on this page illustrates one
    > // way to create an "auto-complete" listbox, where the
    >
    > 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
    >
    >
    > Hope this helps...
    >
    > Chris
    >
     
    Raymond D'Anjou, Jun 8, 2005
    #3
  4. A P

    CJM Guest

    "Raymond D'Anjou" <> wrote in message
    news:%23$...
    > Looks nice CJM.
    > I had written something quick for a couple of my Combos but I'll take a
    > close look at your functions and may just integrate it in my pages.
    > Of course I'll give you full credit but no paycheck. :)
    > Thanks for the code.
    >


    I'm afraid that I can't take the credit... it's a modified version of some
    code found on the web, probably modified by a guy who also found it on the
    web etc...

    You'll probably find that Charles Babbage or Alan Turing wrote the first
    version...!
     
    CJM, Jun 8, 2005
    #4
  5. A P

    A P Guest

    Hi CJM,

    I have tried your code as is, I've just add values on the combo box. I
    receive error message "Object Required" on the browser. Where does it
    pertains to? I have paste the comple file:

    <html>

    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>DropDown Link</title>
    <script src="/js/autocomplete.js"></script>
    </head>

    <body>
    <p>


    <form method="GET" name="frmlink">
    <select size="1" name="selectlink" onkeypress="listbox_onkeypress();"
    onblur="listbox_onblur();">
    <option>Select a Program</option>
    <option value='/c.asp'>Components</option>
    <option value='/me>ME</option>
    </select>
    </form>

    </body>

    </html>

    Hope youmight help me.

    Me

    "CJM" <> wrote in message
    news:...
    >
    > "A P" <> wrote in message
    > news:%...
    > > Hi!
    > >
    > > I have seen some techniques like this on the web. Currently, I'm using
    > > Combo
    > > box which values came from database table. One disadvantage is when the
    > > combo box have lots of values, users are complaining since you cannot

    use
    > > keyboard to search the value that is needed. Hope you might help me.
    > >
    > > regards,
    > >
    > > Me
    > >
    > >

    >
    > Use a <Select> tag as normal, but add a couple of event handlers in as
    > follows:
    >
    > <select name="field1" onkeypress="listbox_onkeypress();"
    > onblur="listbox_onblur();">
    > <option>1</option>
    > ...
    > <option>n</option>
    > </select>
    >
    > Then bang the following script in to a .js file and link it in... and hey
    > presto... you have autocomplete functionality.
    >
    > // Auto-select listbox
    >
    > // This script and the listbox on this page illustrates one
    > // way to create an "auto-complete" listbox, where the
    >
    > 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
    >
    >
    > Hope this helps...
    >
    > Chris
    >
    >
     
    A P, Jun 10, 2005
    #5
  6. A P

    CJM Guest

    "A P" <> wrote in message
    news:...
    > Hi CJM,
    >
    > I have tried your code as is, I've just add values on the combo box. I
    > receive error message "Object Required" on the browser. Where does it
    > pertains to? I have paste the comple file:
    >
    > <html>
    >
    > <head>
    > <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    > <meta name="ProgId" content="FrontPage.Editor.Document">
    > <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    > <title>DropDown Link</title>
    > <script src="/js/autocomplete.js"></script>
    > </head>
    >
    > <body>
    > <p>
    >
    >
    > <form method="GET" name="frmlink">
    > <select size="1" name="selectlink" onkeypress="listbox_onkeypress();"
    > onblur="listbox_onblur();">
    > <option>Select a Program</option>
    > <option value='/c.asp'>Components</option>
    > <option value='/me>ME</option>
    > </select>
    > </form>
    >
    > </body>
    >
    > </html>
    >
    > Hope youmight help me.
    >
    > Me
    >


    I'm not great at debugging Javascript, but what that error message probably
    means is that when your event handler calls a routine, it cant find it.

    It could be that the functions are are called something slightly different,
    or more likely that it can't find your JS file (so check the path).

    One thing you might want to try is include the Javascript in your main file
    (as opposed to an extrernal JS file).

    Chris
     
    CJM, Jun 13, 2005
    #6
    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. =?Utf-8?B?Q2hyaXM=?=
    Replies:
    3
    Views:
    13,787
    Peter Blum
    Mar 30, 2005
  2. Imran Aziz
    Replies:
    2
    Views:
    11,472
    Imran Aziz
    Sep 5, 2005
  3. vishnu
    Replies:
    1
    Views:
    1,216
    Patrick.O.Ige
    Mar 25, 2006
  4. Mike
    Replies:
    1
    Views:
    817
  5. acadam
    Replies:
    0
    Views:
    763
    acadam
    Dec 27, 2006
Loading...

Share This Page