The ASP.NET Ajax Control Toolkit contains a Combo Box Control.

Since I’m posting a series on replacing Ajax Control Toolkit functions with jQuery, in this post we’ll use a jQuery plugin to DropDown control into a slick ComboBox.

Here is the experience :

You can click on the down arrow and see the entire list. Combo boxes excel in scenarios where there are MANY items in the selection set. (Usually to many to be seen without scrolling.

So  in a Combo Box we can type to filter the selection list based on what is types.

Since this is an ASP.NET control, when we submit the page we can access the selected value in our code-behind.

I’m building this using a jQuery Plugin called Hyjack.

[ Get it HERE ]

As with most jQuery plugins, Hyjack is simple to use.

NOTE: the code below includes all JavaScript code at the TOP of the page, uses in line JavaScript, and statically includes the jQuery library. This is done only for illustrative simplicity and is NOT best practice. Please find a variety of best practices information in the posts HERE.

Here is the complete page markup:



<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
         AutoEventWireup='true' CodeBehind='Default.aspx.cs'
         Inherits='jQueryComboBox._Default' %>

<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <link href='Styles/hyjack.css' rel='stylesheet' type='text/css' />
    <script src='Scripts/jquery-1.4.1-vsdoc.js' type='text/javascript'>
	</script>
    <script src='Scripts/jquery.hyjack.select.js' type='text/javascript'>
	</script>
    <script type='text/javascript'>

		$(function () {

			// Hyjack Onload with all defaults
			$('.hyjack').hyjack_select();

			/* Multiple CLASS with customization

			$('.hyjack').hyjack_select({        // Defaults
			ddImage: 'image/of/arrow.png',      // arrow_down.png
			ddCancel: 'image/of/cancel.png',    // cancel.png
			ddImageClass: 'class_of_arrow',     // hjsel_ddImage
			ddCancelClass: 'class_of_cancel',   // hjsel_ddCancel
			emptyMessage: 'No Items Message',   // No Items to Display
			restrictSearch: false/true,         // false
			offset: 12                          // false
			});

			*/
        });
	</script>

</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Select Your State
    </h2>
    <br /><br />
    <asp:DropDownList ID='DDPickState'  class='hyjack' runat='server'>
        <asp:ListItem Value='AL'>Alabama</asp:ListItem>
        <asp:ListItem Value='AK'>Alaska</asp:ListItem>
        <asp:ListItem Value='AZ'>Arizona</asp:ListItem>
        <asp:ListItem Value='AR'>Arkansas</asp:ListItem>
        <asp:ListItem Value='CA'>California</asp:ListItem>
        <asp:ListItem Value='CO'>Colorado</asp:ListItem>
        <asp:ListItem Value='CT'>Connecticut</asp:ListItem>
        <asp:ListItem Value='DC'>District of Columbia</asp:ListItem>
        <asp:ListItem Value='DE'>Delaware</asp:ListItem>
        <asp:ListItem Value='FL'>Florida</asp:ListItem>
        <asp:ListItem Value='GA'>Georgia</asp:ListItem>
        <asp:ListItem Value='HI'>Hawaii</asp:ListItem>
        <asp:ListItem Value='ID'>Idaho</asp:ListItem>
        <asp:ListItem Value='IL'>Illinois</asp:ListItem>
        <asp:ListItem Value='IN'>Indiana</asp:ListItem>
        <asp:ListItem Value='IA'>Iowa</asp:ListItem>
        <asp:ListItem Value='KS'>Kansas</asp:ListItem>
        <asp:ListItem Value='KY'>Kentucky</asp:ListItem>
        <asp:ListItem Value='LA'>Louisiana</asp:ListItem>
        <asp:ListItem Value='ME'>Maine</asp:ListItem>
        <asp:ListItem Value='MD'>Maryland</asp:ListItem>
        <asp:ListItem Value='MA'>Massachusetts</asp:ListItem>
        <asp:ListItem Value='MI'>Michigan</asp:ListItem>
        <asp:ListItem Value='MN'>Minnesota</asp:ListItem>
        <asp:ListItem Value='MS'>Mississippi</asp:ListItem>
        <asp:ListItem Value='MO'>Missouri</asp:ListItem>
        <asp:ListItem Value='MT'>Montana</asp:ListItem>
        <asp:ListItem Value='NE'>Nebraska</asp:ListItem>
        <asp:ListItem Value='NV'>Nevada</asp:ListItem>
        <asp:ListItem Value='NH'>New Hampshire</asp:ListItem>
        <asp:ListItem Value='NJ'>New Jersey</asp:ListItem>
        <asp:ListItem Value='NM'>New Mexico</asp:ListItem>
        <asp:ListItem Value='NY'>New York</asp:ListItem>
        <asp:ListItem Value='NC'>North Carolina</asp:ListItem>
        <asp:ListItem Value='ND'>North Dakota</asp:ListItem>
        <asp:ListItem Value='OH'>Ohio</asp:ListItem>
        <asp:ListItem Value='OK'>Oklahoma</asp:ListItem>
        <asp:ListItem Value='OR'>Oregon</asp:ListItem>
        <asp:ListItem Value='PA'>Pennsylvania</asp:ListItem>
        <asp:ListItem Value='RI'>Rhode Island</asp:ListItem>
        <asp:ListItem Value='SC'>South Carolina</asp:ListItem>
        <asp:ListItem Value='SD'>South Dakota</asp:ListItem>
        <asp:ListItem Value='TN'>Tennessee</asp:ListItem>
        <asp:ListItem Value='TX'>Texas</asp:ListItem>
        <asp:ListItem Value='UT'>Utah</asp:ListItem>
        <asp:ListItem Value='VT'>Vermont</asp:ListItem>
        <asp:ListItem Value='VA'>Virginia</asp:ListItem>
        <asp:ListItem Value='WA'>Washington</asp:ListItem>
        <asp:ListItem Value='WV'>West Virginia</asp:ListItem>
        <asp:ListItem Value='WI'>Wisconsin</asp:ListItem>
        <asp:ListItem Value='WY'>Wyoming</asp:ListItem>
    </asp:DropDownList>
    <br /><br />
    <asp:Button ID='ButtonSubmit' runat='server' Text='Submit'
        onclick='ButtonSubmit_Click' /><br /><br />
    <asp:Label ID='LabelResult' runat='server' Text=''></asp:Label>
</asp:Content>

And here is the code behind.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace jQueryComboBox
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void ButtonSubmit_Click(object sender, EventArgs e)
        {
            LabelResult.Text = &quot;The State You Picked is : &quot; +
                                DDPickState.SelectedValue.ToString();
        }
    }
}

I’ve statically defined the list items but since the parrent control is an ASP.NET Drop Down, you could easily bind the items list to a data source of your choosing.

[ You can download the code above HERE ]