The Ajax Control Toolkit includes a ListSearch [ see HERE ] control extender that can me used to extend a list or drop down list with a filtering feature by which the control will start to narrow the available options in the list to the ones that include the characters that the user has entered.

So when we use a drop down list for the selection of an item, and we enter (set focus) on the control, then the control expands. 

Then when we start to type, we want the list to hide items that do not contain the character sequence that we have typed.

I’ve implemented this feature using Unobtrusive Fast-filter Dropdown

Implementing this plugin (abbreviated UFD) with an ASP.NET DropDownList is easy.


[sourcecode language=”html”]
<%@ Page Title=’Home Page’ Language=’C#’ MasterPageFile=’~/Site.master’
AutoEventWireup=’true’ CodeFile=’Default.aspx.cs’ Inherits=’_Default’ %>

<asp:Content ID=’HeaderContent’ runat=’server’
ContentPlaceHolderID=’HeadContent’>
<link href=’Content/themes/redmond/jquery-ui.css’ rel=’stylesheet’
type=’text/css’ />
<link href=’Styles/udf/ufd-base.css’ rel=’stylesheet’ type=’text/css’ />
<link href=’Styles/udf/plain/plain.css’ rel=’stylesheet’
type=’text/css’ />
<script src=’Scripts/jquery-1.4.4.js’ type=’text/javascript’></script>
<script src=’Scripts/jquery-ui-1.8.13.js’ type=’text/javascript’></script>
<script src=’Scripts/jquery.ui.ufd.js’ type=’text/javascript’></script>
</asp:Content>
<asp:Content ID=’BodyContent’ runat=’server’
ContentPlaceHolderID=’MainContent’>
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit
<a href=’http://www.asp.net’ title=’ASP.NET Website’>www.asp.net</a>.
</p>
<p>
You can also find
<a href=’http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409′
title=’MSDN ASP.NET Docs’>documentation on ASP.NET at MSDN</a>.
</p>
<hr />

<label for=’SelectCountry’>Choose a country:</label><br /><br />

<asp:DropDownList id=’SelectCountry’ name=’SelectCountry’ runat=’server’
ClientIDMode=’Static’>
<asp:ListItem Text=’Afghanistan’ Value=’Afghanistan’></asp:ListItem>
<asp:ListItem Text=’Albania’ Value=’Albania’></asp:ListItem>
<asp:ListItem Text=’Algeria’ Value=’Algeria’></asp:ListItem>
<asp:ListItem Text=’Bahrain’ Value=’Bahrain’></asp:ListItem>
<asp:ListItem Text=’Bangladesh’ Value=’Bangladesh’></asp:ListItem>
<asp:ListItem Text=’Barbados’ Value=’Barbados’></asp:ListItem>
<asp:ListItem Text=’Cambodia’ Value=’Cambodia’></asp:ListItem>
<asp:ListItem Text=’Cameroon’ Value=’Cameroon’></asp:ListItem>
<asp:ListItem Text=’Canada’ Value=’Canada’></asp:ListItem>
</asp:DropDownList>

<br/>

<script type=’text/javascript’ >
$(function () {
$(‘#SelectCountry’).ufd({ log: true });
});
</script>

</asp:Content>

[/sourcecode]


You can garb the working example [ HERE ]