AutoSuggestBox in ASP.Net ASPX

AutoSuggestBox is a custom control written in C# that makes it simple to add 'Google Suggest'-like functionality to your web applications. 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 the look and feel of the control on the web page.

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 the auto-suggest menu.
* GetAutoSuggestBox.aspx -- returns the HTML that contains the suggested items.

First, add a reference to 'AutoSuggestBox.dll'. Then create a sub-directory 'asb-includes' under the root of your web application. Copy the other three files into the new sub-directory.

More detailed instructions are available here.

AutoSuggestBox control into a web form

# Create or open an 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 to the location where you want the suggest box to appear:

<Custom:AutoSuggestBox id="Control ID" DataType="Supported Data Type" runat="server" CssClass="Text Box Style" MaxLength="Max chars in TextBox" Columns="Num of visible chars"/>

For example:

<Custom:AutoSuggestBox id="asbCity" DataType="City" runat="server" CssClass="FormCtrlStyle" MaxLength="100" Columns="30"/>

# Make sure that value of the DataType attribute has been implemented in 'GetAutoSuggestData.aspx.cs'.


<Custom:AutoSuggestBox id="asbCity" DataType="City" runat="server" CssClass="FormCtrlStyle" MaxLength="100" Columns="30" ResourcesDir="/WebApp/AutoSuggestBox"/>


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;
}



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;
}