Web ComboBox V3 is the most recent release of an AJAX-based lookup control for classic ASP, PHP, JSP, and of course ASP.NET. Developed by eBusiness Applications, this control represents the commercialization of some popular new AJAX functionality seen lately on the web (for example, in Google Suggest and Gmail). Web ComboBox does it all, and does it well.

Feature highlights of the product include:

1. Browser compability - Internet Explorer 5.5, Firefox 1.0, Netscape 7, Mozilla 1.7, Camino 0.8.
2. Six distinctive search modes - Filter, Classic, SmartSearch, SmartList, Compact, and Unbound. This list includes modes that replicate Google Suggest and Gmail lookup functionality.
3. Data entry - Includes type-ahead, paging, and "intelligent autocomplete" (fuzzy search).
4. Section 508 compliant - completely keyboard navigable.

AJAX - Asynchronous JavaScript and XML

For those who are unfamiliar with the concept, the term AJAX was coined by Adaptive Path, and merely refers to the use of JavaScript (ECMAScript) and a combination of XML and DHTML to deliver more powerful user interfaces in a web browser. While the ability for component vendors to use AJAX techniques has existed for years, only recently has the development community begun to lay out standards and best practices for its use.

Ideally, an AJAX-based component will have the following workflow:

1. A client request results in a standard HTML page response.
2. A client-side event triggers an asynchronous callback to the server (using XMLHttp).
3. The server outputs an XML Data Island which is transformed via XSLT to HTML. No page refresh occurs at all.

Web ComboBox seems to take advantage of all the browser has to offer, with virtually flawless presentation across browser platforms.

What's so special about version 3 of Web ComboBox? As mentioned previously, there are six search modes. It's doubtful you would ever need them all, and would probably stick to one or two for consistency, but here is where this control really shines. If you have ever looked at the Gmail lookup functionality or the Google Suggest tool and drooled, now you can build the same tools into your own applications--all with a single control.

Search Modes

• Filter - the dropdown only appears as the user types, and returns a concise list of suggestions. Features include type-ahead and an autosizing listbox. This is the Google Suggest lookup style.
  
  Figure 1 - Filter Mode Demo (Like Google Suggest)
  
  Why is Filter mode special? Well, it gives most users just enough of the lookup functionality while staying out of the way. If there are only three relevant records returned from the database, the dropdown sizes perfectly to match those three. It's easy to customize the columns, text color, and highlight color too, to match the appearance of your web application.
   
• Classic - this is the standard paging ComboBox behaviour. The displayed list updates as the user types (as in other modes), but users can also add 'pages' to the data by clicking the paging button, or by simply scrolling down the list with the mouse or keyboard. This particular behavior is used by many comboboxes.
  
  Figure 2 - Classic Mode (Paging ComboBox)
  
  
  
  This mode is extremely useful if the user has a need to browse the data, or where the user is not sure which record he is looking for. If the user does not see in the current list the record he is seeking, he may just key down to the bottom of the list and increase the size of the recordset.
   
• Unbound - in this mode, the control is not bound to a database, but rather to an array or sorted list of items. You can even disable the textbox so that the control behaves like a listbox. This is useful if you want to maintain consistent visual appearance of your input controls.
   
• SmartSearch - AKA "Fuzzy search". When the user begins typing, suggestions are brought up that contain that string anywhere (not just at the beginning). The appearance of the searched-for substring is bolded. Records can be brought up in order of "importance", but this requires some configuration of your SQL statement.
  
  Figure 3 - SmartSearch Mode (Fuzzy Substring Search)
  
  
  For some developers, this feature alone will justify purchasing the control. Few other lookup components (for either desktop or web-based applications) are providing this kind of substring searching. I especially like how the substring the user is searching against is bolded in the list so he can see how that record is relevant.
  
  One final point on SmartSearch is that it allows the developer to prioritize the returned recordset based on some metric. For example, in the case of a Customer List, you could order the list by the number of times that customer has been selected in the past (assuming that information is in the database). This is achieved through SQL, however.
   
• SmartList - this mode allows the user to build a list of items in an HTML textarea control. It uses the Intelligent Autocomplete (SmartSearch) feature to assist selection from a dataset, and when the user selects a value, it is automatically added to the list of items in the textarea (separated by a comma or some other character). This is similar to the feature provided by Gmail when choosing a recipient for a new message. You can select multiple email addresses, and they are all deposited in the textarea.
  
  Figure 4 - SmartList Mode (Build lists of records in a textarea)
  
  
   
• Compact - just a textbox with type-ahead functionality. The neat thing about this mode is that all the same lookup capabilities are still there. You may show the list data in some other part of the page.
  Figure 5 - Compact Mode
  

The API

No AJAX control is complete without a thorough client-side interface. ASP.NET developers who are uncomfortable delving into the JavaScript arena are spared the hassle. Server-side access to the data search and OnSelect events allow almost complete control over functionality. However, to take advantage of some of the more advanced functionality, some JavaScript is required.

Access is provided to over 10 events, including onAfterInitialize, onShow, onHide, onBeforeSearch, onAfterSearch, onBeforeSelect, onAfterSelect, onEditKeyUp, onFocus, onBlur, and onTab.

In addition, developers can work directly with the list data, adding records, clearing the list, and even binding two comboboxes together for master-detail relationships.

Figure 6 -Comboboxes Linked through JavaScript

For some, JavaScript is a kind of black art, and it would be nice to see some of this wrapped up a little more nicely for the average developer, but at least tutorials are available for many common uses.

Installation

The 30-day fully-functional trial of the control is available from the EBA website. A full name and email address are required to receive a download link, which is then immediately available. Download options include special versions for ASP.NET, Classic ASP, PHP, and JSP.

The installation procedure is quick and doesn't require special keys or other additional information. The software is available from the Windows Start menu, under the eBusiness Applications folder, and includes several sample projects.

ASP.NET Interface

Creating a basic ComboBox is straightforward.

1. Start with a new ASP.NET Web Application. In the folder where your application resides, copy the eba.Web.dll assembly to the bin directory, the ebacombo.js file to the root directory, and the style folder to the root directory.
2. Drag the ComboBox eba.Web.dll file onto your toolbox. Alternatively, you can use Visual Studio's toolbox editor: from the Tools menu, select Add/Remove Toolbox Items, click Browse, and locate the Web ComboBox DLL.
3. Choose a preconfigured style, a search mode, and set up your databinding.

One of the nice things about the ASP.NET version of Web ComboBox is its ability to bind to all sorts of data types, including DataSet, DataTable, DataView, IDictionary, IDataReader, and IEnumerable (e.g., Array and ArrayList) objects--just about anything that derives from IListSource. Also, EBA provides recommended SQL statement templates for popular databases including MySQL, SQL Server, Oracle, DB2, and Access.

The Designer

While many developers prefer code view, the designer included with Web ComboBox is a handy tool that reveals many configurable properties. In addition to the standard databinding properties, there are many properties associated with each element, such as width and height for the textbox (especially useful for SmartList), font colors, and highlight colors.

Some key properties and their meanings:

• List.PageSize - the number of records to retrieve from the database at a time.
• SmartListSeparator - the character to use in SmartList mode to separate list items (comma, semicolon, etc.).
• TabIndex - on web forms, the index of this control in the tab order.
• InitialSearch - enables the developer to specify a search string by which to select a record. Confused? It's actually quite ingenious. If you specify "bett" for InitialSearch, and in your data you have a record called "Betty Smith", it will pre-select it when the control loads.
• PreconfiguredStylesheet - Web ComboBox comes with many preconfigured styles, some of which are quite cool. These include styles like Windows XP Blue and Silver, Outlook, Ice, and several styles with little icons that indicate a searchbox.
• Mode - the search mode to be used on this ComboBox control. There are six modes, which were discussed earlier. The default is Classic mode, which includes the use of paging.

Room for Improvement

At the time this article was written, version 3 of Web ComboBox was still in Beta 2. There were several issues being tracked in the vendor's forums. In addition, some of the samples seemed partially complete, and some documentation had yet to be filled out (for example, details about the control Designer were absent). As this product is still in Beta, the bulk of these issues will likely be resolved by the time the component is officially released. Either way, the core component seems generally robust enough for deployment as-is.

General Feelings

This control is the one-stop solution for any lookup functionality required in a web application. There is no question that it sits at the top of the pack in terms of functionality and in terms of features. While there are other controls available that provide some of the same capabilities, I haven't seen one that goes the extra mile in terms of integration with the .NET DataGrid, user controls, and other business layer components of ASP.NET, and is as technologically innovative on the client-side.

It's my opinion that this component will likely move into the top position for AJAX-based lookup controls for years to come. At a price point of roughly $200, it may be out of the reach of independent developers, but a powerful addition to a professional web developer's toolbox.

Web ComboBox V3
eBusiness Applications
http://developer.ebusiness-apps.com