Click here to Skip to main content
11,581,982 members (77,837 online)
Click here to Skip to main content

Type-Ahead suggest textbox server control with Google AJAXSLT

, 22 Mar 2006 159.6K 1.8K 70
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

You may also be interested in...

Comments and Discussions

 
QuestionType-Ahead Server Control Pin
Gail Sims6-Jul-08 10:21
memberGail Sims6-Jul-08 10:21 
AnswerRe: Type-Ahead Server Control Pin
Member 252446923-Jul-08 10:18
memberMember 252446923-Jul-08 10:18 
GeneralRe: Type-Ahead Server Control Pin
Gail Sims24-Jul-08 3:55
memberGail Sims24-Jul-08 3:55 
GeneralRe: Type-Ahead Server Control [modified] Pin
jimboy3333333335-Sep-08 7:40
memberjimboy3333333335-Sep-08 7:40 
Questionallow the user to use a keyboard Pin
pradeepKumar527-Apr-08 22:50
memberpradeepKumar527-Apr-08 22:50 
GeneralTypeAhead in GridView Pin
jerry123422-Dec-07 8:43
sussjerry123422-Dec-07 8:43 
GeneralTypeAhead in Gridview Pin
Thanks for all the fish22-Dec-07 8:39
memberThanks for all the fish22-Dec-07 8:39 
GeneralUse AJAX Control Toolkit Pin
drookue15-Nov-07 12:10
memberdrookue15-Nov-07 12:10 
Question.Text Property Pin
drookue23-Oct-07 15:01
memberdrookue23-Oct-07 15:01 
AnswerRe: .Text Property Pin
gauzzastrip15-Nov-07 9:35
membergauzzastrip15-Nov-07 9:35 
QuestionRe: .Text Property Pin
lahiru liyanage13-Mar-11 23:41
memberlahiru liyanage13-Mar-11 23:41 
GeneralControl was hidding when use listBox Pin
anikepati sunil8-Aug-07 9:27
memberanikepati sunil8-Aug-07 9:27 
Generalgood control Pin
tanthuc14-May-07 21:56
membertanthuc14-May-07 21:56 
QuestionModification for tag list? Pin
patsikes28-Feb-07 9:44
memberpatsikes28-Feb-07 9:44 
GeneralFireFox Pin
afzaal22-Feb-07 17:44
memberafzaal22-Feb-07 17:44 
QuestionHow to use dataset in this application Pin
urs_ashokprabhu25-Sep-06 4:26
memberurs_ashokprabhu25-Sep-06 4:26 
AnswerRe: How to use dataset in this application Pin
Teng-Yong25-Sep-06 4:43
memberTeng-Yong25-Sep-06 4:43 
GeneralParent Child Textboxes Pin
danmorph20-Sep-06 15:55
memberdanmorph20-Sep-06 15:55 
GeneralRe: Parent Child Textboxes Pin
Teng-Yong20-Sep-06 16:00
memberTeng-Yong20-Sep-06 16:00 
GeneralUnusable Pin
Jan Seda19-Sep-06 3:46
memberJan Seda19-Sep-06 3:46 
GeneralRe: Unusable Pin
Teng-Yong20-Sep-06 16:02
memberTeng-Yong20-Sep-06 16:02 
QuestionI like it but keep getting an error Pin
a3net_marc25-Jul-06 6:25
membera3net_marc25-Jul-06 6:25 
AnswerRe: I like it but keep getting an error Pin
Teng-Yong25-Jul-06 14:42
memberTeng-Yong25-Jul-06 14:42 
GeneralRe: ConnectionString Pin
Teng-Yong7-Jul-06 16:52
memberTeng-Yong7-Jul-06 16:52 
GeneralBeautiful work [modified] Pin
ZPharaoh2-Jun-06 16:59
memberZPharaoh2-Jun-06 16:59 
GeneralRe: Beautiful work Pin
HEROSP3-Aug-06 6:23
memberHEROSP3-Aug-06 6:23 
GeneralCan't get it to work when using Master Pages Pin
jackobee7-May-06 19:33
memberjackobee7-May-06 19:33 
GeneralView State problem with ASP 2.0 Pin
jackobee7-May-06 21:02
memberjackobee7-May-06 21:02 
GeneralRe: View State problem with ASP 2.0 Pin
Bunda-nya Aysar8-Feb-07 21:34
memberBunda-nya Aysar8-Feb-07 21:34 
GeneralRe: Can't get it to work when using Master Pages Pin
adi1234563-Oct-07 10:33
memberadi1234563-Oct-07 10:33 
GeneralNice.. Pin
tuca.ssa29-Mar-06 9:13
membertuca.ssa29-Mar-06 9:13 
GeneralRe: Nice.. Pin
Teng-Yong29-Mar-06 13:34
memberTeng-Yong29-Mar-06 13:34 
GeneralIt does it's own databinding Pin
DeKale22-Mar-06 9:40
memberDeKale22-Mar-06 9:40 
GeneralRe: It does it's own databinding Pin
Teng-Yong22-Mar-06 14:03
memberTeng-Yong22-Mar-06 14:03 

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.150603.1 | Last Updated 22 Mar 2006
Article Copyright 2006 by Teng-Yong
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid