Searchable DropDown JQuery

Posted: June 3, 2011 in jQuery

JQuery Searchable DropDown Plugin

jquery-1.4.2.min

Default.aspx:

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head runat=”server”>
<title></title>

<script src=”jquery-1.4.2.min.js” type=”text/javascript”></script>
<script src=”jquery.searchabledropdown-1.0.7.min.js” type=”text/javascript”></script>
<script src=”Common.js” type=”text/javascript”></script>
<style>
.searchableDropDown
{
background-color: #CCCCCC;
border: 2px solid gray;
font-weight: bold;
padding: 3px;
text-transform: uppercase;
}
.nomatches
{
color: Red;
font-weight: bold;
}
</style>
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”scm” runat=”server”>
</asp:ScriptManager>
<asp:UpdatePanel ID=”upd” runat=”server”>
<ContentTemplate>
<div>
<asp:DropDownList ID=”ddlRestaurant” runat=”server” AutoPostBack=”true” CssClass=”searchableDropDown”>
<asp:ListItem>–Select–</asp:ListItem>
<asp:ListItem>Elephant</asp:ListItem>
<asp:ListItem>Cat</asp:ListItem>
<asp:ListItem>Lion</asp:ListItem>
<asp:ListItem>Zebra</asp:ListItem>
<asp:ListItem>Monkey</asp:ListItem>
<asp:ListItem>Cow</asp:ListItem>
<asp:ListItem>Bat</asp:ListItem>
<asp:ListItem>Camel</asp:ListItem>
<asp:ListItem>Dog</asp:ListItem>
</asp:DropDownList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Default.aspx.cs:

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.ClientScript.IsStartupScriptRegistered(“LoadSearchableDropDown”))
{
string JSscript = string.Format(“<script type=\”text/javascript\”>LoadSearchableDropDown(‘#{0}’);</script>”, ddlRestaurant.ClientID);
ScriptManager.RegisterStartupScript(this, this.GetType(), “LoadSearchableDropDown”, JSscript, false);
}

}

Common.js:
function LoadSearchableDropDown(selector) {

$(selector).searchable({
maxListSize: 100,                       // if list size are less than maxListSize, show them all
maxMultiMatch: 50,                      // how many matching entries should be displayed
exactMatch: false,                      // Exact matching on search
wildcards: true,                        // Support for wildcard characters (*, ?)
ignoreCase: true,                       // Ignore case sensitivity
latency: 100,                           // how many millis to wait until starting search
warnMultiMatch: ‘top {0} matches …’,  // string to append to a list of entries cut short by maxMultiMatch
warnNoMatch: ‘no matches …’,          // string to show in the list when no entries match
zIndex: ‘auto’                          // zIndex for elements generated by this plugin
});
}

Output:

dropdown search,  select list search,  jquery

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s