Click here to Skip to main content
12,063,445 members (72,382 online)
Click here to Skip to main content
Add your own
alternative version

Stats

162.7K views
1.8K downloads
70 bookmarked
Posted

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

You may also be interested in...

Comments and Discussions

 
QuestionType-Ahead Server Control Pin
Gail Sims6-Jul-08 11:21
memberGail Sims6-Jul-08 11:21 
AnswerRe: Type-Ahead Server Control Pin
Member 252446923-Jul-08 11:18
memberMember 252446923-Jul-08 11:18 
GeneralRe: Type-Ahead Server Control Pin
Gail Sims24-Jul-08 4:55
memberGail Sims24-Jul-08 4:55 
GeneralRe: Type-Ahead Server Control [modified] Pin
jimboy3333333335-Sep-08 8:40
memberjimboy3333333335-Sep-08 8:40 
Questionallow the user to use a keyboard Pin
pradeepKumar527-Apr-08 23:50
memberpradeepKumar527-Apr-08 23:50 
GeneralTypeAhead in GridView Pin
jerry123422-Dec-07 9:43
sussjerry123422-Dec-07 9:43 
GeneralTypeAhead in Gridview Pin
Thanks for all the fish22-Dec-07 9:39
memberThanks for all the fish22-Dec-07 9:39 
GeneralUse AJAX Control Toolkit Pin
drookue15-Nov-07 13:10
memberdrookue15-Nov-07 13:10 
Question.Text Property Pin
drookue23-Oct-07 16:01
memberdrookue23-Oct-07 16:01 
AnswerRe: .Text Property Pin
gauzzastrip15-Nov-07 10:35
membergauzzastrip15-Nov-07 10:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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.160204.4 | Last Updated 22 Mar 2006
Article Copyright 2006 by Teng-Yong
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid