ajaxToolkit:AutoCompleteExtender 使用键值对

 

How to : Use a Key Value Pair in your AutoCompleteExtender ( updated again... )

Hi all,

This has come up time and again on the asp.net  Ajax  forums and has become the Top Voted issue for the AutoCompleteExtender Work Items . I had some time the other day and set upon to write a fix for this .

How do you use   it?

1) Attach a handler to the itemSelected Event using the OnClientItemSelected property in  the ACE markup

<ajaxToolkit:AutoCompleteExtender runat="server" 

            BehaviorID="AutoCompleteEx" ID="autoComplete1"

            TargetControlID="myTextBox" ServicePath="~/Services/AutoComplete.asmx"               

            ServiceMethod="GetCompletionListKeyValuePair"

            ......

            OnClientItemSelected ="IAmSelected"

        >

</ajaxToolkit:AutoCompleteExtender>

function IAmSelected( source, eventArgs ) {

   alert( " Key : "+ eventArgs.get_text() +"  Value :  "+eventArgs.get_value()); 

}

2) The Server-Side Method :

The Server-Side Method will return an array of strings as before ,

You create KeyValue Pairs by calling the method :

AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(<key>,<value>);

EX:

[WebMethod]



        public string[] GetCompletionList(string prefixText, int count)

        {



            if (count == 0)

            {



                count = 10;



            }



            if (prefixText.Equals("xyz"))

            {



                return new string[0];



            }



            Random random = new Random();



            List<string> items = new List<string>(count);



            for (int i = 0; i < count; i++)

            {



                char c1 = (char)random.Next(65, 90);



                char c2 = (char)random.Next(97, 122);



                char c3 = (char)random.Next(97, 122);



                items.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(prefixText + c1 + c2 + c3, i.ToString()));



            }



            return items.ToArray();



        }

The Display of the ACE does not change , it still remains the same :

Once you select an item from the DropDown of the ACE , you get an alert which shows you the value of the selectedItem.

In Your applications , instead of the Alert , process some business logic as per your requirements.

Hope this is an useful Addition.

Download the Latest AjaxControlToolkit from :

http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941

[Update ]

You don't need to specify the UseKeyValuepairs attibute anymore ( in fact , its been removed :) ).

The ACE script is intelligent enough to realize when Key/Value pairs are returned automatically.

And also , the method CreateKeyvaluePair has been changed to CreateAutoCompleteItem.

Filed under: JavaScript, AutoCompleteExtender

 

http://blogs.msdn.com/phaniraj/archive/2007/06/19/how-to-use-a-key-value-pair-in-your-autocompleteextender.aspx

http://spicydotnet.spaces.live.com/blog/cns!3810EC86F275BE32!174.entry?wa=wsignin1.0&sa=720268041

http://forums.asp.net/t/1162005.aspx

http://www.codeplex.com/AjaxControlToolkit/WorkItem/View.aspx?WorkItemId=9043

http://www.codeplex.com/AjaxControlToolkit/WorkItem/View.aspx?WorkItemId=12910

 

 

http://moosdau.blog.163.com/blog/static/437112820088195216888/