[WebMethod()]
[ScriptMethod()]
public string StateSuggest(string tryValue, string[] additionalParams) {
SqlCommand sqlCommand = new SqlCommand();
//SQL Query to load cities
string loadCitySQL = @"
SELECT distinct top 7 State.StateId as StateId, State.Name as StateName FROM State
WHERE (State.Name like @tryValue OR State.Name like @tryValue1) ";
//bind query parameters
sqlCommand.Parameters.AddWithValue("tryValue", "% " + tryValue + "%");
sqlCommand.Parameters.AddWithValue("tryValue1", tryValue + "%");
List<SuggestionItem> items = new List<SuggestionItem>();
//load data from DataBase
using (SqlConnection sqlConnection = new SqlConnection(_SQLConnectionString)) {
sqlConnection.Open(); //open connection
sqlCommand.CommandText = loadCitySQL;//set command SQL
sqlCommand.Connection = sqlConnection;//set command Connection
using (SqlDataReader sqlDataReader = sqlCommand.ExecuteReader()) {
while (sqlDataReader.Read()) {
//parce data from DataReader
string state = string.Empty;
string stateId = string.Empty;
if (sqlDataReader["StateName"] != null
&& sqlDataReader["StateName"] != DBNull.Value) {
state = sqlDataReader["StateName"].ToString();
}
if (sqlDataReader["StateId"] != null
&& sqlDataReader["StateId"] != DBNull.Value) {
stateId = sqlDataReader["StateId"].ToString();
}
//create SuggestionItem
SuggestionItem suggestionItem = new SuggestionItem();
suggestionItem.Title = state;
suggestionItem.Id = stateId;
//add item to the list
items.Add(suggestionItem);
}
}
sqlConnection.Close();
}
return SuggestionItem.SuggestionArrayToJSON(items.ToArray(), tryValue);
}
ASP.NET AJAX AutoComplete Control Demonstration.
Start typing in the textboxes below. Note that County is filtered by state and City is filtered by County boxes.
The state box shows suggestions even if the box is empty. Also it allows to select more than one state.
| State |
|
| The county box Autocomplete extender uses a template to render list items. You can create your own template to change the look of the items. |
| County |
|
| The city box Autocomplete extender uses a different css style for list items. You can change this to fit your design. |
| City |
|
ConvincingMail AutoComplete Control Description
ConvincingMail AutoComplete is an ASP.NET AJAX 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.
The list with suggested items supplied by a web service is positioned under the textbox.
In the sample above, the textbox is associated with a ConvincingMail AutoComplete extender that pulls States, Counties and Cities. Start typing in the textbox to see a list of suggested items returned by a webservice.
The County suggestions are filtered by the State value and City suggestions are filtered by County value.
Starting from version 2.2 your can specify an html template to render the listing item. Also your server side function can return a more complex json object which you can use to render the item template or in client side functions.
ConvincingMail AutoComplete Properties & Usage
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. 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. 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.
Template -- Optional, (v2.2). An HTML Prototypejs Template to render the listing item.
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
Hi,
I'm just wondering if there will be a version compiled for the 3.0/3.5 version of the AJAX Control Toolkit? |
|
Hi Davide, You can't use the webmethod with the current version of the autosuggest control. There is the prototypejs Ajax.Request is used to retrieve results (see http://www.prototypejs.org/api/ajax/request for more info.). Note that you can use any URL which returns the JSON result with suggestions. Thanks. |
|
| Hi, is it possible to get the suggestion list from a webmethod instead of a webservice (like in ajaxcontroltoolkit.autocomplete)? |
|
The new version (2.2) was released. Read old comments here: old comments
Please use our forum for suggestions and help. Thanks |
|
|