ConvincingMail Advanced Auto Complete/ Auto Suggest Control Extender (Facebook like style)

ConvincingMail AutoComplete is an ASP.NET AJAX control extender that can be attached to any TextBox control, and will associate that control with a popup list to display items that returend by the webservice for the prefix typed into the textbox.


Some features:

• Item Templates
• Clientside Events
• Custom Item JSON
• Visual styles via CSS
• Tested in IE6,7,8 FireFox, Safari, Opera, Chrome.

Demo and more info & examples are available here: http://www.convincingmail.com/Autosuggest-autocomplete.aspx

ConvincingMail AutoComplete Properties & Usage

Control requirements:

• ASP.NET 2.0 or 3.5
• AJAX Control Toolkit
• Prototype Javascript Framework

Control setup:

To use the control on the asp.net page you need to follow this steps:

• Step 1: Add ConvincingMail AutoComplete dll refference to your project.
• Step 2: Declare control refference on your page. e.g.:

<%@ Register Assembly="ConvincingMail.AdvancedAutoSuggest" Namespace="ConvincingMail.AdvancedAutoSuggest" TagPrefix="cc1" %>

• Step 3: Add Prototype JS Framework reference to your page.
• Step 4: Add the control to your page and set properties. e.g.:

<cc1:AdvancedAutoSuggestExtender TargetControlID="CountyTextBox" AdditionalFields="StateIdTextBox" UpdateField="CountyIdTextBox" TitleTdCss="titleTd-green" TitleTrCss="titleTr-green" CommentsTdCss="commentsTd-green" CommentsTrCss="commentsTr-green" HilightedTrCss="suggestionsHilightedTr-green" ServiceUrl="~/Suggestions.asmx/CountySuggest" ID="AdvancedAutoSuggestExtender1" runat="server" /%>

TargetControlID -- Required. The TextBox control where the user types content to be automatically completed.
ServiceUrl -- Required. URL of the webservice which returns suggestions.

Optional Fields

AdditionalFields -- Optional. Comma separated list of controls which should be used to filter results.
UpdateField -- Optional. The TextBox (HiddenTextBox) control where the ID value of selected item is set.
TitleTdCss -- Optional. CSS style of the suggestion item title cell.
TitleTrCss -- Optional. CSS style of the suggestion item title row.
CommentsTdCss -- Optional. CSS style of the suggestion item comments title cell.
CommentsTrCss -- Optional. CSS style of the suggestion item comments title row.
LoadingDivCss -- Optional. CSS style of the loading message (default is:suggestionsLoadingDiv).
HilightedTrCss -- Optional (v2.1). CSS style of the suggestion hilighted item (mouse over).
SuggestOnEmptyField -- Optional. When true the control makes a server call for suggestions when the text box is empty. (default: false).
OnClientItemSelected -- Optional, (v2.1). ClientSide Javascript function to call when an item is selected from the suggestions list. The function accepts two params: sender and item. The item param is the selected suggestion item has the following properties:
Id - An ID value of the selected item.
Title - A highlighted title of the selected item. (like it appeares in the suggestion list)
Description - Selected item description. (like it appeares in the suggestion list)
TitleValue - Original title of the item. (no hilighting tags)
Starting from v2.2 you can specify your own properties.
OnClientPopulating -- Optional, (v2.3). ClientSide Javascript function to call when the webrequest started. (Use this event to show "loading icon")
OnClientPopulated -- Optional, (v2.3). ClientSide Javascript function to call when the webrequest completed but before the suggestion list is shown. (Use this event to hide "loading icon").
OnClientShowing -- Optional, (v2.3). ClientSide Javascript function to call before the suggestion list is shown.
OnClientShown -- Optional, (v2.3). ClientSide Javascript function to call after the suggestion list is shown.
OnClientHiding -- Optional, (v2.3). ClientSide Javascript function to call before the suggestion list is hidden.
OnClientHidden -- Optional, (v2.3). ClientSide Javascript function to call after the suggestion list is hidden.
OnClientItemOver -- Optional, (v2.3). ClientSide Javascript function to call when mouse hovers the item in the list.
OnClientItemOut -- Optional, (v2.3). ClientSide Javascript function to call when mouse leaves from the item in the list.
Template -- Optional, (v2.2). An HTML Prototypejs Template to render the listing item.
HeaderTemplate -- Optional, (v2.3). An HTML Prototypejs Template to render the header of the suggested items list.
FooterTemplate -- Optional, (v2.3). An HTML Prototypejs Template to render the footer of the suggested items list.
LoadingText -- Optional, (v2.3). The text message to show when the content is loading from the server. (Note: you can use the OnClientPopulated and OnClientPopulating events to customize the "loading" behavior. For example you can toggle a "loading" icon like in the state field example above.)

Suggestions WebService:

• Step 1: -- Create new webservice (.asmx) in your project. e.g.: Suggestions.asmx
• Step 2: -- Create the method to return a JSON list of items. View Code Example