Searchable DropDown JQuery

Posted: June 3, 2011 in jQuery

JQuery Searchable DropDown Plugin



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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”&gt;
<html xmlns=””&gt;
<head runat=”server”>

<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>
background-color: #CCCCCC;
border: 2px solid gray;
font-weight: bold;
padding: 3px;
text-transform: uppercase;
color: Red;
font-weight: bold;
<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”scm” runat=”server”>
<asp:UpdatePanel ID=”upd” runat=”server”>
<asp:DropDownList ID=”ddlRestaurant” runat=”server” AutoPostBack=”true” CssClass=”searchableDropDown”>


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);


function LoadSearchableDropDown(selector) {

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


dropdown search,  select list search,  jquery


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s