Ajax Suggest Box For Asp.Net

Dynamic Mode

Begin typing a name in the text box and suggestions will appear showing any matching names that exist in the data source.
Use the up and down arrows on your keyboard to highlight a suggestion, then press ENTER to select it.

User Last Name:

Static Mode

Click the drop down arrow or click "Make" and a dynamic list will appear showing any related items.
These items can be composed of any HTML or images.
You can create static suggestions on the front end to help you format the HTML of the each suggestion.

AsyncSuggestBox Enhanced Demo 1

The AsyncSuggestBox is a feature-rich, Async-Enabled, suggestion server control. This control can be static or dynamic with your choice of data sources. With a fully customizable look and feel, you can provide the most accurate and understandable suggestions possible. It also has the same features as an AsyncTextBox, because that is it's base class. So all the perquisites that are associated with the AsyncTextBox make the AsyncSuggestBox that much better.

Easily provide meaningful suggestions, with HTML precision and AsyncControl speed.
Fully customizable look and feel.
Operates in to distinct modes, static and dynamic.
Define static suggestions on the front end, providing you with the easy way to create HTML-based suggestions.
Emulates the behavior of a AsyncDropDownList, but a lot more interactive and visually appealing.
Select all text or a range of text during an AsyncCallback.
Changes it's Text value during an AsyncCallback.
Validates the user typed text in realtime.
Allows you to easily receive OnTextChanged, OnSuggestionRequested, and OnSuggestionSelected events.
Allows you to implement this control as a required field by only setting one property (EnableValidation="Enabled"), no need to create a another control.
Has the power of an AsyncValidator built-in to ensure you do less coding.
Can be focused during an AsyncCallback.
Its an AsyncWebControl, which means that you can change it's visibility, CSS class, Left/Top coordinate, Width/Height, and ForeColor/BackColor, during an AsyncCallback.
Supports many of the other properties provided by the AsyncTextBox.

<%@ Register Assembly="AsyncControls" Namespace="DelvingWare.AsyncControls" TagPrefix="dw" %>

User Last Name: <dw:AsyncSuggestBox ID="sugDynamicMain" 
    SuggestionMode="Dynamic"
    HighlightColor="silver" 
    MaxLength="20"
    SuggestionCssClass="drpDwn" 
    OnSuggestionRequested="sugDynamicMain_Requested" 
    OnSuggestionSelected="sugDynamicMain_Selected"
    runat="server" />
    <br />
    <dw:AsyncLabel runat="server" ID="lblDynamic" 
    RenderMode="Span" />
    
<dw:AsyncSuggestBox ID="sugStaticMain" 
SuggestionMode="Static" 
Text="Make" 
ListBoxHeight="200" 
ListBoxWidth="200"
HighlightColor="silver" 
RequestSuggestionButtonCssClass="requestButton"
SuggestionCssClass="drpDwn" 
DefaultStyle="false"
CssClass="staticSugBox1" 
RequestSuggestionButtonText=""
runat="server">            
            
<AsyncSuggestion Text="Dodge Viper"
    CssClass="suggestion1" 
    ImageUrl="../images/viper.gif"><i>Dodge</i></AsyncSuggestion>
    
<AsyncSuggestion Text="Lamborghini Diablo"
    CssClass="suggestion1" 
    ImageUrl="../images/diablo.gif"><i>Lamborghini</i></AsyncSuggestion>
    
</dw:AsyncSuggestBox>

using System;
using DelvingWare.AsyncControls;
...
protected void Page_Load( object sender, EventArgs e )
{
    // enable AsyncSuggestBox use
    AsyncPage.Invocation.EnableAsyncSuggestBox = true;
}

protected void sugDynamicMain_Requested( object sender, AsyncSuggestionEventArgs ae )
{
    // get the current value of the suggest box [same as ((AsyncSuggestBox)sender).Text]
    string val = ae.CurrentValue;
    
    // ATTENTION: Calling a stored procedure would be much faster and safer.
    DWConnection.AccUsers [] arr = dwconn.GetUsers("SELECT * FROM ac_users WHERE LastName LIKE '"+val+"%'");

    // iterate array to add the suggestions
    for ( int i = 0 ; i < arr.Length ; ++i )
    {
        DWConnection.AccUsers user = arr[i];

        /* arg1: Text displayed in the text box when a suggestion is selected/clicked
         * arg2: Suggestion value
         */
        // add the AsyncSuggestion to the collection of suggestions
        ae.Suggestions.Add(user.lastName +", "+ user.firstName, user.firstName +" ($"+user.accBalance+")");
    }
}

protected void sugDynamicMain_Selected( object sender, AsyncEventArgs ae )
{
    // display the selected value
    lblDynamic.Text = "You selected: "+ ae.EventValue;

    // focus the suggest box
    sugDynamicMain.Focus();

    // select all the text (so the user can immediately type a new request)
    sugDynamicMain.SelectAll();        
}

Imports System
Imports DelvingWare.AsyncControls
...

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    ' enable AsyncSuggestBox use
    AsyncPage.Invocation.EnableAsyncSuggestBox = true
End Sub

Protected Sub sugDynamicMain_Requested(ByVal sender As Object, ByVal ae As AsyncSuggestionEventArgs)
    ' get the current value of the suggest box [same as ((AsyncSuggestBox)sender).Text]
    Dim val As String = ae.CurrentValue
    ' ATTENTION: Calling a stored procedure would be much faster and safer.
    Dim arr() As DWConnection.AccUsers = dwconn.GetUsers(("SELECT * FROM ac_users WHERE LastName LIKE '"  _
                    + (val + "%'")))
    ' iterate array to add the suggestions
    Dim i As Integer = 0
    Do While (i < arr.Length)
        
    Loop
    i
    Dim user As DWConnection.AccUsers = arr(i)
    ' add the AsyncSuggestion to the collection of suggestions
    ae.Suggestions.Add((user.lastName + (", " + user.firstName)), (user.firstName + (" ($"  _
                    + (user.accBalance + ")"))))
End Sub

Protected Sub sugDynamicMain_Selected(ByVal sender As Object, ByVal ae As AsyncEventArgs)
    ' display the selected value
    lblDynamic.Text = ("You selected: " + ae.EventValue)
    ' focus the suggest box
    sugDynamicMain.Focus
    ' select all the text (so the user can immediately type a new request)
    sugDynamicMain.SelectAll
End Sub