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

Last edited Nov 16, 2009 at 7:07 AM by trooper, version 2