How to use Name-Value pair in AjaxControl Toolkit's AutoComplete Extender?

In ASP.NET you might have used AJAXControl Toolkit's AutoComplete extender.

It is used to created auto suggested textbox. Like google search's textbox (on entering some value suggestion will be shown to the user).

In my application i have also used AutoComplete extender to get suggestion for user name.

But in my case i wanted not only to get the name of the user but also the ID (unique identity key, user ID) of the user.

For achieving this i had used name-value pair for sending the user name and user ID and used the name-value pair at client side to get the name and the value.

DataTable dtUserNames = KLMS.DataAccess.UserDetail.GetUserNames();

List<string> lstUserName = new List<string>();

foreach(DataRow drUserName in dtUserNames.Rows)

{

// Set the User name and ID (Name - Value pair) in an Array.

lstUserName.Add(AutoCompleteExtender.CreateAutoCompleteItem

(

Convert.ToString(drUserName["USER_NAME"]),

Convert.ToString(drUserName["USER_ID"])

)

);

}

The above webmethod will return JSON response in the following format:

{"d":["{\"First\":\"Devi Das\",\"Second\":\"501\"}"]} Here Devi Das is the name of the user and 501 is the userID of Devi Das.

AutoComplete extender triggers OnClientItemSelected event when a particular suggestion is selected.

So we will write the following code in the OnClientItemSelected event to access the name (user name) and value (userID).

Here suggestionSelected() is the event handler for OnClientItemSelected event.

function suggestionSelected(source, e)

{

// Get the selected node(list item) and its value.

var suggestionNode;

var suggestionValue = e.get_value();

if (suggestionValue)

{

suggestionNode = e.get_item();

}

else

{

suggestionValue = e.get_item().parentNode._value;

suggestionNode = e.get_item().parentNode;

}

// Get the selected suggestion's text.

var suggestionText = '';

if (suggestionNode.innerText)

{

suggestionText = suggestionNode.innerText;

}

else

{

if (suggestionNode.textContent)

{

suggestionText = suggestionNode.textContent;

}

else

{

suggestionText = suggestionNode.innerHtml;

}

// suggestionValue -> This variable contains the User ID value.

// suggestionText -> This variable contains the User Name.

}

Hope this helps you.

Related Tags:
ASP.NET, AjaxControlToolkit, AutoComplete Extender, Name-Value Pair

Author: Devi Das

Software Technology Tips

ASP.NET

Let us Connect!