Client Side Auto-Complete for DropDownList?

Discussion in 'ASP .Net Web Controls' started by James Radke, Oct 16, 2003.

  1. James Radke

    James Radke Guest

    Hello,

    I noticed that the standard dropdownlist control has some client
    functionality that allows the user to press a key, and then it goes to the
    first item in the list which starts with the value of the key that was
    pressed.

    I am curious, is there a way to enhance this so that it keeps track of all
    keystrokes entered so if you enter 'B' it will go the first item that starts
    with 'B', then if you press 'R' it will go to the first item that starts
    with 'BR' and so on....

    I have seen several examples where you can do this with a textbox, but I
    really don't have the space to add an additional textbox to my screen, and
    was hoping there is a way that we can do this with javascript, or with the
    dropdownlist control itself!

    Any ideas and/or examples?

    Thanks!

    Jim
    James Radke, Oct 16, 2003
    #1
    1. Advertising

  2. Hi James,

    Based on my research and experience, you can refer to the following
    javascript code to do what you want. (I have not fully tested the code
    because there is not an existed sample. Thank you for your understanding.)
    Just add "onKey();" as the onkeypress event handler for your SELECT
    element. You can change the value of 1000 in the setTimeout call to
    whatever timeout you desire (in milliseconds). This is the timeout for how
    long the user has to wait for the search to reset. (e.g. once "Gar" has
    been pressed, wait 1 second then type "Mir" and it will work)

    ===============================================
    <SCRIPT language="JavaScript">
    var searchString='';
    var searchTimer=-1;

    function onKey()
    {
    var i;
    var j;
    var eltOpt;
    var elt=event.srcElement;
    if (searchTimer!=-1)
    clearTimeout(searchTimer);
    switch (event.keyCode)
    {
    case 8: searchString=searchString.substr(0, searchString.length-1); break;
    default: searchString+=unescape("%"+event.keyCode.toString(16));
    }
    j=elt.options.length;
    for (i=0; i<j; i++)
    {
    eltOpt=elt.options(i);
    if (eltOpt.text.toUpperCase().substr(0,
    searchString.length)==searchString.toUpperCase())
    {
    eltOpt.selected=true;
    break;
    }
    }
    searchTimer=setTimeout('clearSearchString();', 1000);
    event.returnValue=false;
    }

    function clearSearchString()
    {
    searchTimer=-1;
    searchString='';
    }
    </SCRIPT>

    <SELECT name="truecombo" onkeypress="onKey();"
    onfocus="clearSearchString();">
    ===================================================

    Doest it answer your question? If I have misunderstood your concern, please
    feel free to let me know.

    Best regards,

    Jacob Yang
    Microsoft Online Partner Support
    Get Secure! ¨C www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.
    Jacob Yang [MSFT], Oct 16, 2003
    #2
    1. Advertising

  3. James Radke

    James Radke Guest

    Jacob,

    I placed the code into my aspx form, and it does work great for doing the
    autocomplete, however, if after entering whatever letters exaclty matches
    the users selection (i.e. so the item is highlighted), when I click on the
    item, it never then fires the autopostback, like it does when I simply click
    on an item?

    I need to fire the postback after the user has changed the selection since I
    am retrieving other items from the selected record to be displayed! Any
    ideas how to get the postback to then work properly in conjunction with the
    autocomplete?

    Thanks!

    Jim

    "Jacob Yang [MSFT]" <> wrote in message
    news:...
    > Hi James,
    >
    > Based on my research and experience, you can refer to the following
    > javascript code to do what you want. (I have not fully tested the code
    > because there is not an existed sample. Thank you for your understanding.)
    > Just add "onKey();" as the onkeypress event handler for your SELECT
    > element. You can change the value of 1000 in the setTimeout call to
    > whatever timeout you desire (in milliseconds). This is the timeout for how
    > long the user has to wait for the search to reset. (e.g. once "Gar" has
    > been pressed, wait 1 second then type "Mir" and it will work)
    >
    > ===============================================
    > <SCRIPT language="JavaScript">
    > var searchString='';
    > var searchTimer=-1;
    >
    > function onKey()
    > {
    > var i;
    > var j;
    > var eltOpt;
    > var elt=event.srcElement;
    > if (searchTimer!=-1)
    > clearTimeout(searchTimer);
    > switch (event.keyCode)
    > {
    > case 8: searchString=searchString.substr(0, searchString.length-1);

    break;
    > default: searchString+=unescape("%"+event.keyCode.toString(16));
    > }
    > j=elt.options.length;
    > for (i=0; i<j; i++)
    > {
    > eltOpt=elt.options(i);
    > if (eltOpt.text.toUpperCase().substr(0,
    > searchString.length)==searchString.toUpperCase())
    > {
    > eltOpt.selected=true;
    > break;
    > }
    > }
    > searchTimer=setTimeout('clearSearchString();', 1000);
    > event.returnValue=false;
    > }
    >
    > function clearSearchString()
    > {
    > searchTimer=-1;
    > searchString='';
    > }
    > </SCRIPT>
    >
    > <SELECT name="truecombo" onkeypress="onKey();"
    > onfocus="clearSearchString();">
    > ===================================================
    >
    > Doest it answer your question? If I have misunderstood your concern,

    please
    > feel free to let me know.
    >
    > Best regards,
    >
    > Jacob Yang
    > Microsoft Online Partner Support
    > Get Secure! ¨C www.microsoft.com/security
    > This posting is provided "as is" with no warranties and confers no rights.
    >
    James Radke, Oct 16, 2003
    #3
  4. James Radke

    James Radke Guest

    Jacob,

    Is there a way within the javascript that I can check for the enter key:
    i.e. if they type in their search and it brings up the record, if they press
    enter, can I capture that they hit enter, and then do a postback somehow
    within the javascript?

    That could work..... If I knew how to do it!

    Jim

    "James Radke" <> wrote in message
    news:Oqt5Ge$...
    > Jacob,
    >
    > I placed the code into my aspx form, and it does work great for doing the
    > autocomplete, however, if after entering whatever letters exaclty matches
    > the users selection (i.e. so the item is highlighted), when I click on the
    > item, it never then fires the autopostback, like it does when I simply

    click
    > on an item?
    >
    > I need to fire the postback after the user has changed the selection since

    I
    > am retrieving other items from the selected record to be displayed! Any
    > ideas how to get the postback to then work properly in conjunction with

    the
    > autocomplete?
    >
    > Thanks!
    >
    > Jim
    >
    > "Jacob Yang [MSFT]" <> wrote in message
    > news:...
    > > Hi James,
    > >
    > > Based on my research and experience, you can refer to the following
    > > javascript code to do what you want. (I have not fully tested the code
    > > because there is not an existed sample. Thank you for your

    understanding.)
    > > Just add "onKey();" as the onkeypress event handler for your SELECT
    > > element. You can change the value of 1000 in the setTimeout call to
    > > whatever timeout you desire (in milliseconds). This is the timeout for

    how
    > > long the user has to wait for the search to reset. (e.g. once "Gar" has
    > > been pressed, wait 1 second then type "Mir" and it will work)
    > >
    > > ===============================================
    > > <SCRIPT language="JavaScript">
    > > var searchString='';
    > > var searchTimer=-1;
    > >
    > > function onKey()
    > > {
    > > var i;
    > > var j;
    > > var eltOpt;
    > > var elt=event.srcElement;
    > > if (searchTimer!=-1)
    > > clearTimeout(searchTimer);
    > > switch (event.keyCode)
    > > {
    > > case 8: searchString=searchString.substr(0, searchString.length-1);

    > break;
    > > default: searchString+=unescape("%"+event.keyCode.toString(16));
    > > }
    > > j=elt.options.length;
    > > for (i=0; i<j; i++)
    > > {
    > > eltOpt=elt.options(i);
    > > if (eltOpt.text.toUpperCase().substr(0,
    > > searchString.length)==searchString.toUpperCase())
    > > {
    > > eltOpt.selected=true;
    > > break;
    > > }
    > > }
    > > searchTimer=setTimeout('clearSearchString();', 1000);
    > > event.returnValue=false;
    > > }
    > >
    > > function clearSearchString()
    > > {
    > > searchTimer=-1;
    > > searchString='';
    > > }
    > > </SCRIPT>
    > >
    > > <SELECT name="truecombo" onkeypress="onKey();"
    > > onfocus="clearSearchString();">
    > > ===================================================
    > >
    > > Doest it answer your question? If I have misunderstood your concern,

    > please
    > > feel free to let me know.
    > >
    > > Best regards,
    > >
    > > Jacob Yang
    > > Microsoft Online Partner Support
    > > Get Secure! ¨C www.microsoft.com/security
    > > This posting is provided "as is" with no warranties and confers no

    rights.
    > >

    >
    >
    James Radke, Oct 16, 2003
    #4
  5. James Radke

    Rajesh.V Guest

    Try this

    http://www.codeproject.com/aspnet/combobox.asp

    "James Radke" <> wrote in message
    news:...
    > Hello,
    >
    > I noticed that the standard dropdownlist control has some client
    > functionality that allows the user to press a key, and then it goes to the
    > first item in the list which starts with the value of the key that was
    > pressed.
    >
    > I am curious, is there a way to enhance this so that it keeps track of all
    > keystrokes entered so if you enter 'B' it will go the first item that

    starts
    > with 'B', then if you press 'R' it will go to the first item that starts
    > with 'BR' and so on....
    >
    > I have seen several examples where you can do this with a textbox, but I
    > really don't have the space to add an additional textbox to my screen, and
    > was hoping there is a way that we can do this with javascript, or with the
    > dropdownlist control itself!
    >
    > Any ideas and/or examples?
    >
    > Thanks!
    >
    > Jim
    >
    >
    Rajesh.V, Oct 16, 2003
    #5
  6. Hi James,

    I have done more research regarding this issue and would like to share the
    following information with you.

    Firstly, the item change via code (javascript) will not fire the onchange
    event, as opposed to the item change from mouse click or up/down keys.

    In this case, we should capture the carriage return in the onkeypress event
    by adding another sub case to the switch statement.

    case 8: searchString=searchString.substr(0, searchString.length-1); break;
    case 13: //do a manual postback here; break;

    When a carriage return was detected, we can manually raise a postback.
    Please refer to the following Knowledge Base article for the detailed
    information on how to implement it in ASP.NET world.

    HOW TO: Manually Post Back for Specific Events in an .aspx Page Using
    Visual Basic .NET
    http://support.microsoft.com/default.aspx?scid=kb;en-us;328923

    I hope it helps.

    Best regards,

    Jacob Yang
    Microsoft Online Partner Support
    Get Secure! ¨C www.microsoft.com/security
    This posting is provided "as is" with no warranties and confers no rights.
    Jacob Yang [MSFT], Oct 17, 2003
    #6
  7. James Radke

    James Radke Guest

    Jacob,

    That is exactly what I did yesterday to my code, and it works great!

    Thanks!

    Jim

    "Jacob Yang [MSFT]" <> wrote in message
    news:...
    > Hi James,
    >
    > I have done more research regarding this issue and would like to share the
    > following information with you.
    >
    > Firstly, the item change via code (javascript) will not fire the onchange
    > event, as opposed to the item change from mouse click or up/down keys.
    >
    > In this case, we should capture the carriage return in the onkeypress

    event
    > by adding another sub case to the switch statement.
    >
    > case 8: searchString=searchString.substr(0, searchString.length-1); break;
    > case 13: //do a manual postback here; break;
    >
    > When a carriage return was detected, we can manually raise a postback.
    > Please refer to the following Knowledge Base article for the detailed
    > information on how to implement it in ASP.NET world.
    >
    > HOW TO: Manually Post Back for Specific Events in an .aspx Page Using
    > Visual Basic .NET
    > http://support.microsoft.com/default.aspx?scid=kb;en-us;328923
    >
    > I hope it helps.
    >
    > Best regards,
    >
    > Jacob Yang
    > Microsoft Online Partner Support
    > Get Secure! ¨C www.microsoft.com/security
    > This posting is provided "as is" with no warranties and confers no rights.
    >
    James Radke, Oct 17, 2003
    #7
    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. Rick Strahl [MVP]
    Replies:
    1
    Views:
    517
    bruce barker
    Jan 8, 2004
  2. Boss302
    Replies:
    0
    Views:
    1,038
    Boss302
    Nov 21, 2006
  3. linkswanted
    Replies:
    1
    Views:
    901
  4. Bogdan
    Replies:
    2
    Views:
    648
    Bogdan
    Jun 9, 2008
  5. Zoe Hart
    Replies:
    1
    Views:
    366
    Scott Wisniewski
    Jan 8, 2004
Loading...

Share This Page