|
The purpose of this article is to show how to use the free AutoSuggestBox control to
add 'Google Suggest' functionality to your ASP.NET application. There
are plenty of articles available on the internet that explain how to do it,
but there is usually just a lot of theory and not much code that you can easily add
to your application. AutoSuggestBox encapsulates all the complex functionality
and only requires developers to specify datasource for loading auto-suggest
menu.
- Background
- What is AutoSuggestBox?
- Adding AutoSuggestBox to Your Web Application
- How Does it Work
- Conclusion
Background
Have you seen Google Suggest? It is an application created by Google that
demonstrates the power of AJAX. It is really amazing to see it for the first
time, but in a little while the notoriety wears off and most developers forget
about it. While many people acknowledge its 'coolness' factor, they don’t know how
to integrate it with other web applications.
The first time I saw this control I came away with the same feeling.
What an awesome idea, but I have no use for it. Several months ago I started
working on a travel application called 'Travelope'
(see here).
When working on the airfare search form, I was thinking of a
simple interface for selectiing FROM and TO locations. I considered using a combo box,
but there were 1000s of cities, so the form would take a long time to load.
Another option would be to use a text box with a link to popup a city lookup
window. That would require users to open a reference window every time that they
forgot the spelling, so that would not be a great option either. I started
looking at other travel sites for ideas. Many of these sites were using
'Google Suggest'-like control for the purpose of selecting cities and airports.
I thought that would be perfect for 'Travelope', too. And that was how
AutoSuggestBox was born.
What is AutoSuggestBox?
AutoSuggestBox is a custom control written in C# that makes it simple to
add 'Google Suggest'-like functionality to your web application. It supports
C# and VB.NET and works in Internet Explorer as well as in Firefox. This control
utilizes AJAX to retrieve data without refreshing the whole page.
Developers can use CSS to adjust look and feel of the control on the web page.
Click here for the demo.
Adding AutoSuggestBox to Your Web Application
Download the appropriate AutoSuggestBox package from
here.
There are four files that you need to add to your application to use AutoSuggestBox.
- AutoSuggestBox.dll -- contains the control.
- AutoSuggestBox.js -- javascript methods for AJAX support.
- AutoSuggestBox.css -- look and feel of auto-suggest menu.
- GetAutoSuggestBox.aspx -- returns html that contains suggested items.
First, add reference to 'AutoSuggestBox.dll'. Then create a sub-directory 'asb-includes'
under the root of your web application. Copy the other 3 files into the new sub-directory.
More detailed instructions are here.
Specify data types for loading auto-suggest menu items
When user starts typing in AutoSuggestBox you need to provide a data source for suggested values.
The system allows for as many data source as required by your application. For example you can have
one data source for 'City' suggest box, another for 'Airport'.
To add a data source you need to modify the 'GetAutoSuggestData.aspx' file.
By default the class implements "City" datasource. "LoadMenuItems" contains a
switch statement for loading different types of data:
private ArrayList LoadMenuItems(string sDataType, string sKeyword)
{
ArrayList aMenuItems;
switch(sDataType)
{
case "City":
aMenuItems=LoadCities(sKeyword);
break;
default:
throw new Exception("GetAutoSuggestData Type '"
+ sDataType + "' is not supported.");
}
return aMenuItems;
}
The 'LoadCities' method retrieves suggested cities from the database according to characters
typed by the user. It loads the top 10 cities starting with the specified keyword.
Then it generates an array of ASBMenuItems and fills it with results from the database.
private ArrayList LoadCities(string sKeyword)
{
ArrayList aOut=new ArrayList();
string sConnString="Provider=Microsoft.Jet.OLEDB.4.0;" +
"Data Source=c:\\databases\\AutoSuggestBox_Demo.mdb;User Id=admin;Password=;";
OleDbConnection oCn=new OleDbConnection(sConnString);
string sSql="SELECT TOP 10 tblCity.Name as CityName, " +
"tblCity.Code as CityCode, " +
"tblCountry.Name as CountryName, " +
"tblState.Name as StateName " +
"FROM (tblCity INNER JOIN tblCountry ON tblCity.CountryID=tblCountry.ID) " +
" LEFT OUTER JOIN tblState ON tblCity.StateID=tblState.ID " +
"WHERE (tblCity.Name LIKE '" + sKeyword.Replace("'", "''") + "%') " +
"ORDER BY tblCity.Name";
OleDbCommand oCmd = new OleDbCommand(sSql, oCn);
oCn.Open();
OleDbDataReader oReader = oCmd.ExecuteReader();
string sCity;
string sCityCode;
string sState;
string sCountry;
string sLabel;
ASBMenuItem oMenuItem;
while (oReader.Read())
{
//Build label using City, Country & State
sCity =oReader.GetString(0);
sCityCode =oReader.GetString(1);
sCountry =oReader.GetString(2);
if (oReader.GetValue(3)==System.DBNull.Value)
sState="";
else
sState=oReader.GetString(3);
sLabel=sCity;
//Append either state or country
if (sState != "")
sLabel+=", " + sState;
else
sLabel+=", " + sCountry;
oMenuItem=new ASBMenuItem();
oMenuItem.Label=sLabel;
oMenuItem.Value=sCityCode;
aOut.Add(oMenuItem);
}
oReader.Close();
oCn.Close();
return aOut;
}
If you need to add other data sources, just add more case statements to LoadMenuItems function.
Insert AutoSuggestBox control into a web form
-
Create or open already existing web form
-
Add the following line to the top of your ASPX page:
<%@ Register TagPrefix="Custom" Namespace="ASB" Assembly="AutoSuggestBox" %>
-
Add the following line at the location where you want suggest box to appear:
<Custom:AutoSuggestBox id="Control ID" runat="server"
DataType="Supported Data Type"
CssClass="Text Box Style"
MaxLength="Max chars in TextBox"
Columns="Num of visible chars"
/>
For example:
<Custom:AutoSuggestBox id="asbCity" runat="server"
DataType="City"
CssClass="FormCtrlStyle"
MaxLength="100"
Columns="30"
/>
-
Make sure that value of DataType attribute has been implemented in 'GetAutoSuggestData.aspx.cs'
See previous section.
-
If your web application doesn't run in the root of the webserver (ex. http://localhost/WebApp),
then you need to add another attribute to autosuggestbox tag:
<Custom:AutoSuggestBox id="asbCity" runat="server"
DataType="City"
CssClass="FormCtrlStyle"
MaxLength="100"
Columns="30"
ResourcesDir="/WebApp/AutoSuggestBox"
/>
Note: By default the ResourcesDir is "/asb_includes".
How Does it Work
When the user starts typing text in the control, javascript handles OnKeyUp, OnKeyDown and OnKeyPress events.
Then AJAX is used to contact the server side with every click to retrieve a list of suggested entries.
So the flow of events is as follows:
- The user presses a key while the focus is on the AutoSuggestBox control
- Javascript checks if the user entered up/down/enter or any other character
- If the user entered up/down and suggest menu is visible - appropriate menu item is selected
- If the user clicked 'enter' suggest menu becomes invisible, while the current selection is filled into the suggest box
- If the user typed an alphanumeric character, Javascript sends an XmlHttpRequest to GetAutoSuggestData page on the server
-
The 'GetAutoSuggestData.aspx' page takes the current value of the text box and the type of data to retrieve.
It usually generates a query to retrieve suggested values from the database.
It then uses the results of the query to create HTML for the suggest menu and returns it back to the page.
- The web page retrieves the updated 'Suggest Menu' and displays it in place of the old one
Conclusion
In this article we demonstrated how simple it is to add 'Google Suggest' functionality to
your web application using the free AutoSuggestBox control.
Happy programming!!!
References
AutoSuggestBox site -- contains all the info, demos and downloads related to AutoSuggestBox
Google Suggest -- site that started it all
Travelope -- travel engine that implements AutoSuggestBox
|
