Highlight dropdownlist value based on value enterd in textbox

[mzmishra]

I have one webapplication(.net2.0)c#.

My page has one dropdownlist which is very huge sometimes it contains many records which is difficult for the users to view the data they exactly looking for.

What we want to do now is we want to add a textbox on the top of the dropdown and once user enter any data on textbox we want to select the firstrow in the dropdown which start from the letter they entered in textbox.

Can this achieved some way either in c# or javascript.

[Frinavale]

I think I would use JavaScript for this task. I would handle the onkeyup event for the TextBox and search for anything that matches what is in the TextBox using regular expressions.

-Frinny

[mzmishra]

Thanks Frinny.
That's what exactly I am doing now.
Wrote a javascript function and calling that for both onkeyup and onchange event of textbox.

[Frinavale]

:)
I don't think you'll need the onchange because the onkeyup should cover it.

[mzmishra]

Finny,

I got one more issue.

What I did is I add this code and javascript function.Now I am getting my results properly.
But my problem is when I highlight that row and user clicks it I want to fire the onselectedevent change for dropdown.


Now for my case it won't work because my selected row is now the displayed one.I want the behaviour to be similar to highlighting a dropdown and pressing a key, which will then take you to the first instance of the dropdown item that starts with the letter pressed.


Is there any idea how to achieve
My code

function filtedropdown(pattern, list){
 
    if (!list.bak){
 
    list.bak = new Array();
    for (n=0;n<list.length;n++){
    list.bak[list.bak.length] = new Array(list[n].value, list[n].text);
    }
    }
 
    var selectedItempos=0;
    for (n=0;n<list.bak.length;n++){
    var indexOfLastName=list.bak[n][1].indexOf(',');
    var lastNameSubstring=list.bak[n][1].toLowerCase().substring(0,indexOfLastName);
    if((lastNameSubstring.toLowerCase().indexOf(pattern.toLowerCase())!=-1) 
        && (lastNameSubstring.toLowerCase().indexOf(pattern.toLowerCase())==0)){
    selectedItempos=n;
    break;
    }
    }
    list[selectedItempos].selected=true;
}
<asp:Panel id="pnlProviderList" runat="server" visible="false">
                     Skip to letter:&nbsp;
                     <input type="text" name="txtSkip" onkeyup="filtedropdown(this.value,<%= ddlProvider.ClientID %>)" onchange="filtedropdown(this.value,<%= ddlProvider.ClientID %>)"/>
                        &nbsp; Provider:
                        <ewc:EmblemDropDownList runat="server" ID="ddlProvider" AutoPostBack="true"
                         OnSelectedIndexChanged="ddlProvider_SelectedIndexChanged" />
                    </asp:Panel>