Asp.Net AutoComplete using YUI with multiple columns

Updated: Here is the download link http://abhishekshrestha.posterous.com/autocomplete-yui-net-source

I wanted an AutoComplete with multiple columns for asp.net application and couldn't find any good example or implementation. I looked at AjaxToolkit and found that it didn't support multiple columns as result. Looking into other options i found YUI (Yahoo User Interface) AutoComplete.

YUI autcomplete is a javascript control and i had to used for asp.net application. As for that i created a wrapper control in asp.net and used the control where ever needed.

Requirements
1. Multiple columns
2. Scrollable: horizontal and vertical
3. Select some hidden value which is not shown in the autocomplete
4. Header
5. AutoComplete hover width not dependent on the textbox

Basic functionalities of YUI
1. As you type, each text makes an ajax request to a url with the written text as the querystring
2. The page hits the database with the querystring text
3. The database layer responds with the set of matched values as result.
4. The page then forms the data in the xml form which the autocomplete understands and send it back as response to ajax call
5. The control reads the response, parses it with the predefined xml rule and then displays it.

1. Has header
2. Has 6 columns
3. Searchable fields : Ticker, Company Name, CUSIP, ISIN, CIK
4. When selected, the CODEX is selected Letter1 is shown in the textbox. While sending the selection to the server side CODE1 is sent.
5. Hover box's length is more than the textbox


1. Has header
2. Has 3 columns
3. When selected the right most non empty column value is selected.

Technical Overview
YUI Autocomplete is a javascript control and to use it we have to write the initialization and implementation code in javascript. As .net developers we are not too comfortable with javascript and asp.net user control is always much easier to implement. Hence, I created a wrapper (user) control which defines and declares the Autocomplete when the page loads for the first time.


Required Files:
1. animation.js (for animation)
2. autocomplete.js (properties, events for autocomplete)
3. connection.js (ajax, webservice, etc)
4. get.js (http request)
5. json.js (if using json, in this example i am using xml)
6. yahoo-dom-event.js (event handling)
7. AutoComplete.css (style sheet)


Html Part (ascx)

Properties (ascx.cs):

Most of these properties are standard YUI Autocomplete properties. Few of them like ResetClientFn and SendMultipleInputs are related specific sending all the selected values to the sever side so that we do not display the already selected entry.

You can know more about the properties by going to the YUI Aucomplete site. I have made sure that the property names are in sync with the autocomplete property names.

Using the Control