CodeSnip: How to Create a Dynamic Searchable DropDown List in ASP.NET
page 3 of 6
by Nidal Arabi
Average Rating: 
Views (Total / Last 10 Days): 43218/ 136


Obviously, you are eager to open your Visual Studio .NET 2003 and start coding.  So let us do it.

1.      Open Visual Studio .NET 2003, create a new ASP.NET website and give it a name: EDropDown.

2.      In the default form created, insert two labels and two HTML input boxes.

3.      Give the first label a text property My Product Name and the second one a text property My Employee Name.

4.      As for the two input boxes, put the ID property type TxtProductName and TxtEmployeeName in sequence.

By now we should have Figure 1 on the first form, the default start up design.

Figure 1

5.      Now, we move to the Drop Down list WebForm in order to build it.  In the solution explorer window, right click the solution name and choose Add New Item then choose a web form and save the file as NamePicker.aspx.

Figure 2

6.      It is a good idea to start with the picture to display the form design. Take a look at Figure 2.

7.      As you can see, you should start with a label that displays a title for the page Name Picker.

8.      Create another label with a text property Search Name.

Create an HTML input box in front of it with an ID property TxtOldName.

9.      Create a drop down box called CbxName.

10.  Create an html button called Button1 and a value Select Name.

At the end, create an HTML input box with an ID property TxtNewName with type Hidden.

Now for the behind the scene work, we have to insert the following JavaScript inside the head tag of the HTML view of the form.

Listing 1

<script language = "JavaScript"> 
function FindText(finder_textbox, finder_selectbox)
  var searchstr = finder_textbox.value;
  var myexp = new RegExp(("^" + searchstr), "i");
  var foundresult = false;
  var i = 0;
  while ((foundresult = false) || (i < finder_selectbox.length))
    if (myexp.test(finder_selectbox.options[i].text))
      finder_selectbox.options[i].selected = true foundresult = true;
      document.Form1.TxtNewName.value = finder_selectbox.options[i].text;
      i = 32768;
function FindText1(finder_textbox, finder_selectbox)
  var searchstr = finder_textbox.value;
  var myexp = new RegExp(("^" + searchstr), "i");
  var foundresult = false;
  var i = 0;
  while ((foundresult = false) || (i < finder_selectbox.length))
    if (myexp.test(finder_selectbox.options[i].text))
      finder_selectbox.options[i].selected = true foundresult = true;
      document.Form1.TxtNewName.value = finder_selectbox.options[i].text;
      i = 32768;
function Done()
  var par1 = "par1";
  var par2 = "par2";
  var par3 = "par2";
  var par4 = "par2";
  par1 = document.Form1.TxtNewName.value;
  par2 = document.Form1.TxtNewName.value;
  par3 = document.Form1.TxtNewName.value;
  par4 = document.Form1.TxtNewName.value;
  var MyArgs = new Array(par1, par2, par3, par4);
  window.returnValue = MyArgs;
function doInit()
  var par1 = "Apar";
  var par2 = "par2";
  var par3 = "par3";
  var par4 = "par4";
  var MyArgs = new Array(par2, par3, par4);
  MyArgs = window.dialogArguments;
  document.Form1.TxtOldName.value = MyArgs[1].toString();
  document.Form1.TxtPattern.Text = document.Form1.TxtPattern.Text + ' : ' +
function SetValue(finder_selectbox)
  var foundresult = false;
  var i = 0;
  document.Form1.TxtNewName.value = finder_selectbox.value;
  document.Form1.TxtOldName.value = finder_selectbox.value;
function CheckEnter()
  if (event.keyCode == 13)

11.  Another addition is to the body tag of the form in order to allow it to set focus and return the name on exit.

Listing 2

<body onblur="this.window.focus();" bgColor="#ffff66" 
onload="doInit()" ms_positioning="FlowLayout" onunload="Done();">

12.  When the user presses any key in the search box, the dropdown box should select the nearest match to it.  This is done by inserting the following HTML code.

13.  A change to Select Name is also needed as follows.

Listing 3

<BUTTON id="BUTTON1" onmousedown="SetValue(CbxName);" 
onclick="Done();" type="button" runat="server">

14.  You can now close the HTML view and return to the design view.

15.  In the Page load event of the form insert the following code.

Listing 4

If Not Me.IsPostBack Then
  Call SetupData()
End If

16.  The setup data procedure is the key to our dropdown box.

Listing 5

Public Sub SetupData()
  Dim MySQLConnection As New SqlClient.SqlConnection
  Dim MySQLCommand As New SqlClient.SqlCommand
  Dim MyDataAdapter As New SqlClient.SqlDataAdapter
  Dim MyDataSet As New Data.DataSet
  Dim ESQL As String
  ESQL = Request.QueryString().Get("ESQL")
  ESQL = ESQL.Replace("char(43)", "+")
  MySQLConnection.ConnectionString = 
"Data Source=.; Initial Catalog=Northwind; User ID=sa; Password=pass@word1"
  MySQLCommand.Connection = MySQLConnection
  MySQLCommand.CommandType = CommandType.Text
  MySQLCommand.CommandText = ESQL
  MyDataAdapter.SelectCommand = MySQLCommand
  MyDataAdapter.Fill(MyDataSet, "ComboBoxTable")
  CbxName.DataSource = MyDataSet
  CbxName.DataMember = "ComboBoxTable"
  CbxName.DataValueField = MyDataSet.Tables.Item("ComboBoxTable").Columns(0).ColumnName
  CbxName.DataTextField = MyDataSet.Tables.Item("ComboBoxTable").Columns(1).ColumnName
  CbxName.SelectedIndex = 0
  TxtNewName.Value = CbxName.SelectedValue
End Sub

Now we turn back to our webform1 and add the following for the two input boxes and for the employee input box.

Listing 6

<INPUT onkeypress="if (event.keyCode == 13)
 this.value=NamePicker('Select ProductID, ProductName From Products',this.value,this.value);"
 ondblclick="this.value=NamePicker('Select ProductID, ProductName 
From Products',this.value,this.value);"
 type="text" name="TxtProductName"

Listing 7

<INPUT onkeypress="if (event.keyCode == 13)
 this.value=NamePicker('Select EmployeeID, FirstName + char(32) + LastName 
From Employees',this.value,this.value);"
 ondblclick="this.value=NamePicker('Select EmployeeID, FirstName char(43)
 char(32) char(43) LastName From Employees',this.value,this.value);"
 id="TxtEmployeeName" type="text" name="TxtEmployeeName"

17.  Since our input boxes are calling a JavaScript function, we need to provide the code for it in the header section of the HTML.

Listing 8

<script language = "javascript" type = "text/javascript" > function
  sInString = sInString.replace( /  ^  \
    s +  / g, ""); // strip leading
  return sInString.replace( /  \
    s + $ / g, ""); // strip trailing
function NamePicker(StrSQL, StrOldName, StrNewName)
  StrOldName = TrimString(StrOldName);
  StrNewName = TrimString(StrNewName);
  var MyArgs = new Array(StrSQL, StrOldName, StrNewName);
  var WinSettings =
  var MyArgs = window.showModalDialog("NamePicker.aspx?ESQL=" + StrSQL, MyArgs,
  if (MyArgs != null)
    return MyArgs[0].toString();

Congratulations, you have created your popup searchable dropdown box that satisfies your needs.

View Entire Article

User Comments

Title: jQuery Searchable DropDown Plugin   
Name: Haggi
Date: 2009-12-01 6:58:48 PM
Have a lookt at this plugin
Title: javascript   
Name: lalita
Date: 2009-03-30 5:53:17 PM
hi, i found your article very useful but how can i get information on dropdownlist which use javascript
Title: How to create a drop down list in a form view in VB 2005 (ASP.NET)   
Name: Joseph Tran
Date: 2008-11-17 11:09:20 AM
Dear Mr. Hitashi,
How are you doing? My name Joe, and I'm new to ASP.NET 2.0 (In VB). I wish to ask you a question about how to create a drop down list in Form View. So the user can select their picks without making any mistakes or mistypo. Would you please show me how or tell me how to create it step by step?

Thank You Very Much

my email is
Title: Prob with autopostback   
Name: Hitashi
Date: 2008-09-16 4:43:03 AM
Hi can you plz help me to resolve this prob. I m creating no of dynamic dropdown list. It works fine upto 2 dropdownlist. But if the 3rd one come the second one hides from the form due to autopostback can you help me plz to resolve this prob

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2021  |  Page Processed at 2021-12-02 7:16:20 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search