When you go to Yahoo, if you start typing in their web search, after you type several words, you end up with a window that has several options according to the search string you just entered. I was trying to simulate that effect in an asp.net webpage.
To do this I decided to use the ASP.NET AJAX TOOLKIT. I am using Visual Web Developer 2008 Express to do this, I created a new website, and started working from here.
To accomplish this you will need to:
1- Add the AjaxControlToolkit.dll to your project(Add reference -> Browse tab ). When you download the tookit you can search for this dll, and you should be able to find it.
(I found mine in this path: Visual Studio 2005\Templates\ProjectTemplates\Visual C#\AjaxControlExtenderProjectCS\AjaxControlToolkit.dll)
2- Add a webform to your project
3- Add a web service to your project
4- Add a style sheet to your project
The Webform:
I will proceed to explain several parts of the webform
Before the HTML you need to register the Ajax Control Toolkit custom control.
<%@ Register
Assembly=”AjaxControlToolkit”
Namespace=”AjaxControlToolkit”
TagPrefix=”ajaxToolkit” %>
Don’t forget to add the style sheet we are using.
<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” />
Inside the form I have the following:
First, I start adding a toolkit script manager:
<ajaxtoolkit:toolkitscriptmanager runat=”server” id=”ScriptManager1″/>
If you don’t do this you might get an error that says “The control with ID ‘AutoComplete1′ requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.”. The reason you need it (as I understand it) is that the toolkit script manager merges multiple javascript scripts into one file, which is downloaded at runtime.
Then, you need a textbox, which is where your search is going to be typed.
<asp:textbox runat=”server” id=”txtInput” width=”300″/>
Of course, you need to add in the form the ASP.NET AJAX AutoComplete Extender. According to the asp.net webpage this extender:”can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.”. This is how the extender looks in my form:
<ajaxToolkit:AutoCompleteExtender
runat=”server”
ID=”AutoComplete1″
TargetControlID =”txtInput”
ServiceMethod=”GetCustomersContactTitle”
ServicePath=”WebService.asmx”
MinimumPrefixLength=”2″
CompletionInterval=”1000″
EnableCaching=”true”
CompletionSetCount=”20″
CompletionListCssClass=”flyout-background”
CompletionListItemCssClass=”flyout-item”
CompletionListHighlightedItemCssClass=”flyout-item-hover”>
</ajaxToolkit:AutoCompleteExtender>
This is what the webform needs, nonetheless, this is very basic, because my purpose is to show how this works, and that you can also understand what everything means.
Now, I am going to write about the two most important parts of the webservice :
First, make sure this line is commented when you add your Webservice. This line needs to be uncommented, since you need to call the webservice from your webform.
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
Last but not least, you need a method that returns the data to be displayed. My method basically gets the ContactTitle Column in the Customers table which is located in the Northwind database. I used this database since it is available to everyone. The AJAX AutoComplete Extender requires that the method that you use to display data, matches the following signature: a method that returns an array of strings, and has two parameters, which is the prefix the user just entered, and the amount of records to be displayed.
[WebMethod]
public string[] GetCustomersContactTitle(string prefixText, int count)
{
List<string> items = new List<string>(count);
DataSet ds = new DataSet();string connectionString = "Data Source=(local);Initial Catalog=Northwind;Integrated Security=SSPI;";
using(SqlConnection connection = new SqlConnection(connectionString))
{
string sql = "SELECT ContactTitle FROM Customers WHERE ContactTitle LIKE '" + prefixText + "%'";
SqlDataAdapter adapter = new SqlDataAdapter();
adapter.SelectCommand = new SqlCommand(sql,connection);
adapter.Fill(ds);
}
foreach (DataRow dr in ds.Tables[0].Rows)
{
items.Add(dr["ContactTitle"].ToString());
}
return items.ToArray();
}
Finally, the stylesheet, to have a better understanding on the CSS Classes I would recommend that you play with them, so you have a better understanding on what they do. Nonetheless, I provided a description of what they do.
This class is going to be applied to the completion list flyout.
.flyout-background {
border: 1px solid #009;
list-style-type: none;
margin: 0px;
background-color: #FFFFFF;
text-align: left;
}
This class is going to be applied to an item in the AutoComplete list flyout.
.flyout-item {
color: #FF0000;
}
This class is going to be applied to a highlighted item in the AutoComplete list flyout.
.flyout-item-hover {
background-color: #66FFFF;
}
This is the final result:
Here’s a copy of my files
If you have any comments just let me know.
