Auto Suggest Box Control

Posted on 2007-07-23
Last Modified: 2012-06-27

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

Question by:CalmSoul
    LVL 9

    Accepted Solution

    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
    LVL 5

    Author Comment

    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"
    LVL 5

    Author Comment

    Please close the question...

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
    ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
    It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
    This video discusses moving either the default database or any database to a new volume.

    732 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now