Auto Suggest Box Control


I found this control... Can somebody give me walk through to make it work with SQL database?

Who is Participating?
Download and add required files

Download the "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
Go to 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".


Chirag Patel
CalmSoulAuthor Commented:
Can you please explain further on "Specify available data types"? also I want to add SQL connection instead of access? How I can do that?

   Private Function LoadCities(ByVal sKeyword As String) As ArrayList
        Dim aOut As ArrayList = New ArrayList

        Dim sConnString As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=c:\Inetpub\wwwroot\Ajax\Database\AutoSuggestBox_Demo.mdb;User Id=admin;Password=;"
        Dim oCn As OleDbConnection = New OleDbConnection(sConnString)

        Dim sSql As String
        sSql = "SELECT TOP " & (mnNumMenuItems + 1) & " 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"
CalmSoulAuthor Commented:
Please close the question...
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.