Client Side Auto-Complete for DropDownList?

[James Radke]

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

 

[Jacob Yang [MSFT]]

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]

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

 

[James Radke]

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

 

[Rajesh.V]

Try this

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

 

[Jacob Yang [MSFT]]

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]

Jacob,

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

Thanks!

Jim