Click here to Skip to main content
Click here to Skip to main content

Type-Ahead suggest textbox server control with Google AJAXSLT

, 22 Mar 2006
Rate this:
Please Sign up or sign in to vote.
An ASP.NET type-ahead suggest textbox (Autocomplete) that leveraging on Google AJAXSLT

Sample Image - typeahead.jpg

Introduction

There are quite a number of AJAX libraries/frameworks designed to run on the .NET framework. The typical example would be Microsoft Atlas. As a beginner of AJAX, I'd like to have an in depth understanding of the technologies. Thus, I spent some time to first create something much more simplified which I could also use in my web application projects.

In many web applications, we need to place a lookup textbox or combo box (drop down) to enable users to select one of the records in a master table (product, customer, employee, bin locations, and etc.). Sometimes, the master table comprises of thousands of records, and binding all the records to a combo box is rather inefficient and potentially causes slowness in page loading.

I was inspired by Google Suggest and the Gmail email address field that heavily employ AJAX technologies. I also learned that Google offers an open source project, Google AJAXSLT, which is a set of JavaScript's that are intended for XML transformation to HTML at the client side (web browser) using XSLT and XPATH. This initiative is to promote development of more user friendly fat clients as it reduces the load on the servers substantially.

I decided to spend some time to explore the synergy of ASP.NET and AJAXSLT. Hence, I tried to create a type-ahead suggest textbox that'd make asynchronous requests to the server as the user inputs text. The result that closely matches the input string will be returned to the drop down area below the textbox asynchronously.

Background

I created a custom server control which consists of a TextBox and a div object. The "keyUp" event of the Textbox triggers a request to the server, and expects the server to fetch the first 10 records (select the top 10 fields from the table where the field like "keyword%") to the browser in XML form.

At the client-end, which is the web browser, I employ three AJAXSLT functions, "xmlParse()", "xsltProcess()" and "el". "el()" is just a shortcut to "document.getElementById()". However "xmlParse" and "xsltProcess" are designed to parse XML, XSLT, and transform it into HTML.

The HTML output will be injected into the div object which is the drop down area intended for records selection.

The downloadable demo project requires the "Northwind" database of SQL Server to work with, and it uses both the "Products" and the "Customer" tables.

Using the code

The way to use this control is extremely easy.

  1. Copy all the five JavaScript files from the downloadable source file (typeahead_src.zip) into your web folder. There are the "dom.js", "misc.js", "xpath.js", "xslt.js" (from Google AJAXST), and "ws.js" (with reference to this) files, and make a reference in the header of your web page as follows:
    <script src="js/misc.js" type="text/javascript"></script>
    <script src="js/dom.js" type="text/javascript"></script>
    <script src="js/xpath.js" type="text/javascript"></script>
    <script src="js/xslt.js" type="text/javascript"></script>
    <script src="js/ws.js" type="text/javascript"></script>
  2. Add a new server control in the toolbox by selecting "aspnetcs_TypeAhead.dll" in the source file.
  3. Drag and drop the "TypeAhead" control into your web page.
  4. Since I mostly use SQL Server in my web applications, the TypeAhead textbox works only with SQL Server currently. Hence you need SQL Server to be the backend database. There are three essential properties that need to be set up before you can even test it. They are:
    • ConnectionString
    • TableName
    • DataField
    private void Page_Load(object sender, System.EventArgs e)
    { 
      TypeAhead1.ConnectionString="server=localhost;" + 
                 "database=Northwind;integrated security=SSPI";
      TypeAhead1.TableName="Products";
      TypeAhead1.DataField="ProductName";
    }
  5. That is it! You do not need to create another aspx page to respond to the request from the web browser.

Areas of Future Improvement

  1. Support generic data source.
  2. Allow user to use a keyboard (only with mouse, currently) for record selection.
  3. Introduce more intelligent logics to reduce frequency of server requests.
  4. Ability to display more informative results instead of just the selected field in the drop down area.
  5. Fonts of drop down area should be configurable.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Teng-Yong
Web Developer
Malaysia Malaysia
Visit my personal website to know more about me.
www.rainforestnet.com

Comments and Discussions

 
QuestionType-Ahead Server Control PinmemberGail Sims6-Jul-08 11:21 
AnswerRe: Type-Ahead Server Control PinmemberMember 252446923-Jul-08 11:18 
GeneralRe: Type-Ahead Server Control PinmemberGail Sims24-Jul-08 4:55 
GeneralRe: Type-Ahead Server Control [modified] Pinmemberjimboy3333333335-Sep-08 8:40 
Questionallow the user to use a keyboard PinmemberpradeepKumar527-Apr-08 23:50 
GeneralTypeAhead in GridView Pinsussjerry123422-Dec-07 9:43 
GeneralTypeAhead in Gridview PinmemberThanks for all the fish22-Dec-07 9:39 
GeneralUse AJAX Control Toolkit Pinmemberdrookue15-Nov-07 13:10 
Question.Text Property Pinmemberdrookue23-Oct-07 16:01 
AnswerRe: .Text Property Pinmembergauzzastrip15-Nov-07 10:35 
QuestionRe: .Text Property Pinmemberlahiru liyanage14-Mar-11 0:41 
GeneralControl was hidding when use listBox Pinmemberanikepati sunil8-Aug-07 10:27 
Generalgood control Pinmembertanthuc14-May-07 22:56 
QuestionModification for tag list? Pinmemberpatsikes28-Feb-07 10:44 
GeneralFireFox Pinmemberafzaal22-Feb-07 18:44 
QuestionHow to use dataset in this application Pinmemberurs_ashokprabhu25-Sep-06 5:26 
AnswerRe: How to use dataset in this application PinmemberTeng-Yong25-Sep-06 5:43 
GeneralParent Child Textboxes Pinmemberdanmorph20-Sep-06 16:55 
GeneralRe: Parent Child Textboxes PinmemberTeng-Yong20-Sep-06 17:00 
GeneralUnusable PinmemberJan Seda19-Sep-06 4:46 
GeneralRe: Unusable PinmemberTeng-Yong20-Sep-06 17:02 
QuestionI like it but keep getting an error Pinmembera3net_marc25-Jul-06 7:25 
AnswerRe: I like it but keep getting an error PinmemberTeng-Yong25-Jul-06 15:42 
GeneralRe: ConnectionString PinmemberTeng-Yong7-Jul-06 17:52 
GeneralBeautiful work [modified] PinmemberZPharaoh2-Jun-06 17:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 22 Mar 2006
Article Copyright 2006 by Teng-Yong
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid