How Do I Bind a Database to a WebFX Combo Box Control?

An often requested feature in Web applications is a drop-down that behaves like a Combo Box in Windows applications. If you start typing in a drop-down in a Windows application, it will preselect an item that starts with all the letters you type in. The drop-down in a Web browser preselects the item that starts with the last letter you typed in. Not very convenient. Fortunately, there are many replacements for the default drop-down available. One of them is the WebFX Combobox. In this snippet, I will demonstrate you how to fill this control with information from a database. I won't be discussing how the control works, and I also won't explain how you can use the advanced features of the control that allows you to add new data. This snippet will simply demonstrate how to generate the client-side code for the drop-down with information from a database.

Prerequisites

Before you start, make sure you download the WebFX Combobox first. Next, unpack the archive and move the files ComboBox.css and ComboBox.js to a folder in your Web site. Next, create a new ASP file called Combobox.asp. You can choose any location for the files you want, but this snippet assumes that all three files are located in the same folder.

You'll also need a database with at least one table that contains the data that you want to add to the drop-down. In this code example, I am using a table called Countries. Each country has an ID (its ISO code) and a Description. The ID is used as the value attribute for each option, while the Description is used as the visible part in the drop-down control. The article assumes that the database is placed in the same folder as well, so be sure to change the path that is passed to Server.MapPath if you decide to move your database.

I am using a list of countries just for demonstration purposes. Since the list of countries isn't likely to change very often, it's probably better to use a static JavaScript file with the code for the countries already aded. Generating the entire JavaScript code from the database everytime the page loads may not be a wise idea in a real-life application, as it causes a lot of performance overhead. For this example however, the country list is just perfect, as it provides enough sample data to test out the functionality of the control.

The Code

The following code demonstrates how to bind the smart Combo Box to a recordset. Please note that I am not responsible or taking credit for the Combo Box control. This article just demonstrates how to use the Combo Box in combinations with a database. Contact WebFX for more information about the Combo Box control.

Simply copy the text below and paste it in the document ComboBox.asp.

<%@ Language=VBScript %>
<% Option Explicit %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>ComboBox Demo</title>
  <script src="ComboBox.js" type="text/javascript"></script>
</head>

<body>
  <script type="text/javascript">
  dm=new ComboBox("dm")
  dm.add(
  <%
    ' Create Connection object, connection string etc
    Dim MyConnection
    Dim MyConnectionString
    Dim MySQLStatement
    Dim MyRecordset
    MyConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;" & _
            "Data Source=" & Server.MapPath("Website.mdb") & _
            ";User Id=admin;Password="

    ' SQL Statement will return a recordset with an ID 
    ' (the ISO code for the country) and the name / description of the Country
    MySQLStatement = "SELECT Country.ID, Country.Description " & _
        "FROM Country ORDER BY Country.Description"

    Set MyConnection = Server.CreateObject("ADODB.Connection")
    MyConnection.Open MyConnectionString

    ' Execute the SQL statement
    Set MyRecordset = MyConnection.Execute(MySQLStatement)

    If Not MyRecordset.EOF Then
    Do While Not MyRecordset.EOF
      ' For each record in the recordset, construct a new ComboBoxItem.
      ' ComboBoxItem is defined in the file ComboBox.js

      Response.Write(vbTab & "new ComboBoxItem('" & _
            MyRecordset.Fields("Description").Value & "', '" & _
            MyRecordset.Fields("ID").Value & "')")

      MyRecordset.MoveNext()

      ' Are there more items? If so, we need to add a comma
      If Not MyRecordset.EOF Then
        Response.Write("," & vbCrLf)
      End If
    Loop 
  End If

  ' Clean Up
  MyRecordset.Close()
  Set MyRecordset = Nothing
  MyConnection.Close()
  Set MyConnection = Nothing
%>
)
</script>
</body>
</html>

Open the page in your browser, click the Combo Box and then type in Net. As soon as you start typing letters, you'll see the list of countries being limited to those starting with the letters you have typed. Once you typed Net, the list will look like this:

The Combox Control with the list limited to those countries starting with Net
Figure 1: The Combobox in action

Demo code

You can see the full code of the example here.

Download Files

Source Code for this Article
(The code download just contains the database and the .asp file. For the code for the ComboxBox, please check out the WebFX site.

Where to Next?

Wonder where to go next? You can post a comment on this article.

Doc ID 302
Full URL https://imar.spaanjaars.com/302/how-do-i-bind-a-database-to-a-webfx-combo-box-control
Short cut https://imar.spaanjaars.com/302/
Written by Imar Spaanjaars
Date Posted 06/05/2004 14:22
Date Last Updated 11/02/2020 12:15
Date Last Reviewed 06/10/2006 15:39
Listened to when writing Inertia Creeps by Massive Attack (Track 4 from the album: Mezzanine)

Comments

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the Doc ID of the document.

(Plain text only; no HTML or code that looks like HTML or XML. In other words, don't use < and >. Also no links allowed.