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 :
https://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.
Comments
Anonymous
June 26, 2007
The comment has been removedAnonymous
June 26, 2007
The comment has been removedAnonymous
July 03, 2007
The comment has been removedAnonymous
July 03, 2007
Hi Raj, this sounds great! I've read Shawn's blog post on how to apply patches, but can't figure out how to do it. If you have time it would be great if you could explain what I do with the files once i downloaded them. I have the patch.xml file and the other files. Thanks in advice!Anonymous
July 04, 2007
Hi Jaymo, I replied to your post on the forums . I am looking into this issue now and will get back to you . In case you have any screenshots , please use the contact Form to send that to me . Thanks, RajAnonymous
July 04, 2007
Hi Raj, This looks great! Though, i don't know how to apply this patch to the AJAX Control Toolkit. Could you please help me?Anonymous
July 04, 2007
http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=9043http://blogs.msdn.com/...Anonymous
July 25, 2007
Hi, In this code: function IAmSelected( source, eventArgs ) { alert( " Key : "+ eventArgs.get_text() +" Value : "+eventArgs.get_value()); } can I pass other parameters to the function (some controlId or something) beside source and eventArgs? If so, can you give me an example? ThanksAnonymous
July 26, 2007
Hi riddler, The Function being IAmSelected is added as an event handler to the ItemSelected event on the flyout of the ACE. It gets the Arguments as are specified for the Eventhandlers of the ItemSelected Event in the AutoCompleteExtender's behaior. If you want to add an additional context , you can modify the behavior to add your extra parameters. Thanks, Phani RajAnonymous
September 06, 2007
Hi ! Thank you for your work, your code works like a charm :) Cheers. LaurentAnonymous
September 13, 2007
When I select an item from the available list I use the value to populate an id field. However if I then change this item by typing text into the textbox the id field doesn't change. How do I set the id field to null if I'm typing in a new item after selecting an existing one? Any help much appreciated.Anonymous
September 14, 2007
Hello Mary , When do you populate the "ID" Field ? is it after selecting an item from a list ? In case yes , then you can use the "itemSelected" event to change the "ID" Field whenever a new value is selected. for ex: if you consider my above example in the post , you need to modify the IamSelected Function to reset the "ID' Field. function IAmSelected( source, eventArgs ) { alert( " Key : "+ eventArgs.get_text() +" Value : "+eventArgs.get_value()); //Do something to reset the ID Field } Hope this helpsAnonymous
September 16, 2007
Thanks for your reply. I'm populating the id field using the "itemselected" event. However if I then change the text without selecting a new item from the list eg by typing a new item directly into the textbox the id field is not updated. Is there anyway to clear the id field if the text is changed? Thanks againAnonymous
September 17, 2007
Hi Mary , There are 2 things you can do , a) Subscribe to the onblur event of the textbox [ this is I.E Only ] b) Attach an OnHide Animation to the ACE and use a ScriptAction to clear the value of the "ID" Field . I'd suggest that you go with option (b) . <ajaxToolkit:AutoCompleteExtender blah blah blah blah blah blah blah blah > <Animations> <OnHide> <ScriptAction Script="ClearHiddenIDField()" /> </OnHide> </Animations> </ajaxToolkit:AutoCompleteExtender> <script language="javaScript"> function ClearHiddenIDField() { //Do something to reset the ID Field } </script> This way , the ID Field will be reset regardless of whether you select a value or not and also ,it will run AFTER the ItemSelected event . so , you should be safe :-) Hope this helpsAnonymous
September 18, 2007
First of all this is a great tool and easy to implement with excellent examples. I would like to be able to do this: When I select an item from the available list I use the value to populate an id field i.e. textbox,label to pass to a database. Thanks very much in advance.Anonymous
September 19, 2007
has this been taken out. What is the status? i´m using AtlasControlToolkit-26965.zip ThksAnonymous
September 20, 2007
Hi Jccondor, The Key-Value pairs Patch is " ChangeSet : 24539 ". The last I heard about the new release which includes this feature ( 10917 ) is supposed to be by the end of this week . Refer to this link : http://forums.asp.net/t/1159709.aspx Hope this helps Thanks, Phani RajAnonymous
September 27, 2007
I did download the latest release and it doesn't seem to have the key-value pair. Am i doing something wrong? is there any way i can apply the patch, i went through Shaw Burke's blog and i don't see how it should work (just unzipping the files somewhere on your computer and building the solution...) any help would be greatly appreciated. ThanksAnonymous
September 27, 2007
Never mind my previous post. I figured out how to get a specific version. I had trouble opening it(no credentials with TFS) but i just copied the folder i needed to the toolkit, build it and the autocomplete extender had the key-pair value. Thank you this is a life saverAnonymous
September 27, 2007
Pretty Sweet ! All the Community members who contributed to the new toolkit Release got featured on KirtiAnonymous
September 27, 2007
Pretty Sweet ! All the Community members who contributed to the new toolkit Release got featured on KirtiAnonymous
September 27, 2007
I download the patch . how it is used in the my project .. Please let Know the process. urgent ....Anonymous
September 28, 2007
Hello Vijay , You dont need to download the patch now . You can download the Latest version of the AjaxControlToolkit , ( i.e 10920 ) and the functionality is included in it. Hope this helpsAnonymous
September 28, 2007
very good. I will have a try.Anonymous
October 02, 2007
The comment has been removedAnonymous
October 02, 2007
Hello Jeff, I will cover this scenario in an upcoming blog Post about common scenarios with the AutoComplete Extender . Please let me know if there are any other scenarios that you wish to be addressed. Thanks, RajAnonymous
October 02, 2007
Hi, I have a problem with the AutoCompleteExtender: When I type something in the textbox and the completion list appears and I want to select an item using the keyboard, if I press enter on an item the whole page refreshes (I have a sumbit button on the page). This problem appears on Firefox, but in IE it works. In the patch that contains the key-value pair functionality I saw event.preventDefault() and event.stopPropagation() in the method which deals with key events. It seems these 2 event methods do not work in Firefox. Any idea? Thanks.Anonymous
October 03, 2007
Hi Riddler , I looked into this and saw that the sample website page showing the ACE has a fix for this . <script type="text/javascript"> // Work around browser behavior of "auto-submitting" simple forms var frm = document.getElementById("aspnetForm"); if (frm) { frm.onsubmit = function() { return false; }; } </script> Hope this helps. Thanks, RajAnonymous
October 04, 2007
The comment has been removedAnonymous
October 10, 2007
Jeff, Use the following: function IAMSelected(source, eventArgs) { $get("partNoTxt").value = eventArgs.get_value(); } TimAnonymous
October 14, 2007
Hi I'm trying to get the key/value behaviour to work properly. I can get it to return the values, and the alert to show which key/value was selected works fine. However, the suggestions that appear in the autocomplete list are the key fields not the value fields. So the list of suggestions is showing username and not full name. Any help greatly appreciated.Anonymous
October 14, 2007
Hey, Although that this is exactly what I need, i can't seem to get it to work. I downloaded that latest version and "installed" it (Why they don't do this with an .exe to avoid confusion I don't know). But I still am not getting the "OnClientItemSelected" trigger. Do I need to reinsert DLL's or something like that in my project?Anonymous
October 15, 2007
Hello Ben, Can you please share a sample of your code with me ? You can drop it off to PhaniRaj At Microsofot Dot Com . I will take a look at it and see if I can help out. Thanks, Phani RajAnonymous
October 15, 2007
The comment has been removedAnonymous
October 15, 2007
Tim, Thanks for the help. I ended up solving this a little differently: function PartNoSelected( source, eventArgs ) { var partNoTxt = document.getElementById('<%=partNoTxt.ClientID%>'); partNoTxt.value = eventArgs.get_value(); } JeffAnonymous
October 21, 2007
hello I post one week ago,but the article is lost,so I post again. I want to understand how to display two values(name and description) under the autocomplete dropdownlist , have anybody know to how to do it, thanksAnonymous
October 30, 2007
The comment has been removedAnonymous
October 31, 2007
Hello Stitch, In JavaScript : function IAmSelected( source, eventArgs ) { $get("HiddenFieldId").value = " Key : "+ eventArgs.get_text() +" Value : "+eventArgs.get_value(); } In VB Dim FirmID as Interger = HiddenFieldId.Value Hope this helps Thanks, Phani RajAnonymous
November 10, 2007
Hello Raj, in function IAmSelected( source, eventArgs ) what does "source" contain. Can I get the ID of AutoCompleteExtender from it and how? Or is there any other way to get which ACE called IAmSelected function? The idea is to get the key from the key-value pair using one function for all ACEs on the page. So I need to know which of them triggered the event. Thank you.Anonymous
November 10, 2007
Hello Sha, The "source" is the ACE that triggered the event. you can run source.get_id() to get the ID of the ACE . Hope this helps. Thanks, RajAnonymous
November 10, 2007
Hello Raj, Thanks for your prompt reply. That worked. But now I encountered anothor problem. Some of my strings that I pass as values contain ';' (semicolons). And looks like ACE doesn't like them. If let's say I have a key-value pair like 5 - one;two instead of getting on entry in my auto complete list with the value of "one;two", I am getting two entries as following: {"First":"one two:","Second":"5"} (note: quotes and curly brackets are part of those entries; I copied exactly what I've got) eventArgs.get_value() and eventArgs.get_text() both return the entries as they appear My guess is the semicolons are used as some kind of separators and probably are not valid characters. But is there some work around? How can I display ";" symbol? Thank you for your help.Anonymous
November 10, 2007
Hello Sha, You would need to use HTML Character Entities . The Semi-Colon would map to : ; Refer : http://www.natural-innovations.com/wa/doc-charset.html Thanks, RajAnonymous
November 12, 2007
Hello Raj, Substituting ";" with ";" did help much, as now my those entries look like this: {"First":"one; two:","Second":"5"} Or am I doing it wrong? Thank you.Anonymous
November 12, 2007
This is GREAT! Thank you so much! It looks like this feature is standard in the latest (as of 2007-11-12) version of the Ajax Control Toolkit.Anonymous
December 20, 2007
Wonderful post - thank you for your time and efforts... This is a very much useful feature add-on for this control.Anonymous
December 28, 2007
The comment has been removedAnonymous
February 08, 2008
In JavaScript : function IAmSelected( source, eventArgs ) { $get("HiddenFieldId").value = " Key : "+ eventArgs.get_text() +" Value : "+eventArgs.get_value(); } In VB Dim FirmID as Interger = HiddenFieldId.Value Hi, Can someone tell me where do I put the VB portion? Thx.Anonymous
March 10, 2008
Hi there This is a great tool and this resouce/blog is cool too. Iam using the Feb 29 2008 release. One little problem that I have is that Iam using vb as the language and I need to expand on and declare the 'souce' and 'eventArgs' parameters into the function being called In my aspx page, Iam decarling the function as follows:
<script runat="server"> Private Function IAmSelected(ByVal source As Object, ByVal eventArgs As EventArgs) As String IAmSelected = "" 'alert(" Key : " + eventArgs.get_text() + " Value : " + eventArgs.get_value()) End Function </script>
However, the eventArgs method .get_text() and .get_value() do not form part of the eventArgs object. Is there a different type I need to use, e.g. AutoCompleteExtender.EventArgs ? Thanks urfan
Anonymous
March 12, 2008
Hi Urfan, The source code mentioned in javascript is client-side code. There is no server-side event triggered that you can hook into . I woul try and check if the Jscript function runs and then check if the VB function runs on the client-side. Thanks, PhaniAnonymous
March 31, 2008
Thank you, Phani for your feedback, my mistake earlier. Iam getting a strange designer error to do with the animation section: 'cc1:AutocompleteExtender' could not be set on property 'Animations'. I've checked and double checked the behaviour id matches those expected in the script but cannot resolve this error. If I remove this block then all works but don't get the drop down appearing as per the examples. I've tried it with and without the scripts: <Animations> <OnShow> <Sequence> <%-- Make the completion list transparent and then show it --%> <OpacityAction Opacity="0" /> <HideAction Visible="true" /> <Parallel Duration=".4"> <FadeIn /> </Parallel> </Sequence> </OnShow> <OnHide> <%-- Collapse down to 0px and fade out --%> <Parallel Duration=".4"> <FadeOut /> </Parallel> </OnHide> </Animations>Anonymous
October 07, 2008
Hi Thanks for working on this! I don't mean to be a whiner, but the current state of this extender just doesn't seem to match the usual standards for the Ajax.net control extenders. It requires you to write some Javascript, to define hidden controls in your source that you don't really need and does not go well into reusable user controls. I know I could write some code to fix this but the point is that I could just drop the latest AjaxControlToolkit dll onto any server and it should work, I shouldn't have to worry about special builds that I've tweaked myself! So.... Is it too much to ask to polish this up a little bit? Just introduce a property SelectedValue on the extender that we can use server-side without having to do anything else? Thanks very much! You guys are great!Anonymous
October 08, 2008
Hi Panos, Can you file your suggestion as a workItem on the codeplex site ? The site is here : http://www.codeplex.com/AjaxControlToolkit/WorkItem/List.aspx once the item is filed , please leave a comment with the Work Item number and I will take a look at this over the weekend.Anonymous
October 08, 2008
Hi, I've created a work item: http://www.codeplex.com/AjaxControlToolkit/WorkItem/View.aspx?WorkItemId=18858 Thanks again!Anonymous
October 20, 2008
Hi, A very comprehensive article. Thank you so much. Thanks - MukeshAnonymous
December 19, 2008
Thank you PhaniRajuYN!!! this was very helpfull.Anonymous
February 04, 2009
Hi Raj, This is terrific. I hope someone is still checking this blog, because I'm just having one tiny problem. All of this works for me as long as I don't add the 'OnClientItemSelected ="IAmSelected"' argument to the AutoCompleteExtender. I have created the IAmSelected function, i placed it in the same Bin/AutoComplete.vb file that I'm already storing the GetCompletionList function in, and I made IAmSelected the simplest function I could possibly think of, just to try to narrow down the problem. But still, if I use "OnClientItemSelected" then the AutoCompleteExtender doesn't fire at all. If I take out "OnClientItemSelected", then it fires. Any ideas what else I can try? Thanks --MaryAnonymous
February 05, 2009
Hi Mary , The IAmSelected function is a client-side javaScript function , the function should exist in the Autocomplete.aspx page to be called. I think the reason tha AutoComplete isnt firing is because its looking for the function in the page and on failing to find it , not populating the results. Hope this helpsAnonymous
February 05, 2009
Thank you SO MUCH PhaniRajuYN! That was exactly the problem. I fixed that, and now it's working just right. You just made my day! MaryAnonymous
May 28, 2009
http://vincexu.blogspot.com/2008/10/custom-autocomplete.htmlAnonymous
July 04, 2009
Just tell me..why is doing this so convoluted ... the original example wasn't even correct. !!!!Anonymous
July 06, 2009
Hi Hamish, I am no longer actively working on the AjaxControlToolkit , if you have any issues with the Toolkit , then the CodePlex page is the best place to make your voice heard. http://ajaxcontroltoolkit.codeplex.com/WorkItem/List.aspx Also , the source can be downloaded at : http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=27326Anonymous
December 20, 2009
Excellent! Just made my life easier. Keep it up buddy!Anonymous
January 05, 2010
great work ! and very help full. good man AnoopAnonymous
January 19, 2010
Thank you very much for such a nice article. This article has helped me to render Key, Value for each item. Display only key but use Value when item is selected. Greate help!Anonymous
March 16, 2010
Where does the "get_value()" method come from? I cannot find any documentation about it, but it seems to work fine for everyone, including me...