ajaxToolkit:AutoCompleteExtender 使用鍵值對

很奇怪爲什麼MS不把auto complete 封裝成可以直接服務器端使用鍵值對，而要使用者自己定義客戶端事件解決。。。。下面是網上看到的使用鍵值對方法，有空封裝一下，嘿嘿

 

 

 

 

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