AutoSuggestBox : How to add AutoSuggestBox to your ASP.NET project

How to add AutoSuggestBox to your ASP.NET project

Download and add required files

Download "AutoSuggestBox" control from here
Unzip the file into a directory on your system
Open new or already existing web application in Visual Studio .NET
Add reference to "AutoSuggestBox.dll"

Right click on the project in Solution Explorer and select "Add Reference"
Click on 'Browse' button in the top right corner
Goto directory where you unzipped the files, select "AutoSuggestBox.dll" and click "Open"
AutoSuggestBox should now appear in the references folder of your project

Copy AutoSuggestBox resource files into your project

Run 'Windows Explorer' and open the directory where you unzipped the files in step 2
Right-click on sub directory 'asb_includes' and select 'copy'
Switch back to Visual Studio
Right-click on the web project in 'Solution Explorer' and select 'paste'.
You should see 'asb_includes' sub-directory appear in your web project.
The sub-directory should contain AutoSuggestBox.css, AutoSuggestBox.js, Blank.html and GetAutoSuggestData.aspx

Specify available data types
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 data source please follow these steps:

Open /AutoSuggestBox/GetAutoSuggestData.aspx.cs (or '.aspx.vb' if using VB.NET)
NOTE: The ASPX portion of the file is empty.
Scroll to the bottom of the file, where you will find function

private ArrayList LoadMenuItems()'
By default the function contains implementation of "City" datasource
You can remove "city" implementation and replace it with your own
If you need to add other data sources, just add more case statements to LoadMenuItems function

Add AutoSuggestBox control to 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 to location where you want 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 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 'ResourcesDir' attribute to autosuggestbox tag:
<Custom:AutoSuggestBox id="asbCity" DataType="City" runat="server" CssClass="FormCtrlStyle" MaxLength="100" Columns="30" ResourcesDir="/WebApp/AutoSuggestBox"/>

NOTE: By default the ResourcesDir is "/asb_includes".

Now build it and ENJOY!!!
If you encounter any problems please contact us here.