hi, i noticed there is a fix for autocomplete to support key value..

however is there a documentation on how to utilizie this feature?

Hi Shihalv,

 Please refer to the below link :

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

Thanks,

We have tweaked the feature a little to make sure it is easy to use and avoided introducing new properties to AutoComplete. If you would like to pass along additional data to the AutoComplete extender it will now detect it automatically if your webservice returns an array of strings that have been serialized using AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(string, string) helper method. You do not need to set any additional properties if you observe this rule and can extract the value from the list item and use it. If you look at the Developement branch of the Toolkit from the source code tab of Codeplex, you will find in the TestingClient project a sample aspx file that demonstrates the usage: AutoComplete\TextValuePair.aspx. 

Here is an example of that webservice:

                [System.Web.Services.WebMethod]
                [System.Web.Script.Services.ScriptMethod]
                public static string[] GetCompletionListWithContextAndValues(string prefixText, int count, string contextKey)
                {
                    System.Collections.Generic.List<string> items = new System.Collections.Generic.List<string>(GetCompletionListWithContext(prefixText, count, contextKey));
                    for (int i = 0; i < items.Count; i++)
                    {
                        items[i] = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(items[i], i.ToString());
                    }
                    return items.ToArray();
                }

kirtid, thank you so much for the update on this much anticipated feature, I'm using it and it's working fine. I have noticed that when I put a asp.net TextBox control in a content page (with a MasterPage), the HTML ID generated for it changes, a prefix like ctl00_ContentID_ is inserted. Is there anything in the javascript library that will allow me to input that prefix instead of me having to hard code it ? Here's what I'm currently doing:  

function setValue(sender, args) {
   $get('ctl00_MainContent_txtRequerente').value = args.get_value();
}

thank you
-- Anderson

This is really great stuff! it worked for me too.

anderson, my approach to that is to build my javascript dynamically...

if you noticed, I have a property called "SelectedKeyID".  I set this property to the Client ID of the textbox control that I want to use to store the Key value.

StringBuilder js = new StringBuilder();

js.Append("function " + clientSelectMethodName + "(source, arguments)");

js.Append("var keyStore = $get('" + SelectedKeyID + "');");

js.Append("keyStore.value=arguments.get_value();");

js.Append("</script>");

Hi -

This is all very cool and maby I am missing something here - but in our situation all we really need is an event that can be trapped server side when an item is selected in the autocomplete list. We want to populate another list (not an aoutocomplete list - just a standard serverside listbox) basised on what is selected from the autocomplete list. If this was answered and I missed it - I appologise.

 Any help or suggestions appreciated

I was able to store the selected value in a control (Label or Textbox), which I can then use on the server-side to take action.  Unfortunately though, I can't figure out how to store the value in a hidden field (i.e. if I set the Label or Textbox to Visible=True, it doesn't make it to the page as a control that's accessible to JS).  I'm kind of stuck at this point as well with having to show the selected value on the screen.

• I am using master and content pages so the client side names of server controls change – that is why I had to do the $get to get a handle for the controls.
• The function IamSelected fires the server side OnTextChanged event of the text box that is the target of the AutoCompleteExtender. That server side event populates my other list box with the values I want – works perfect.

Hi,

I am able retrieve a value from client side, i had requirement where i need to get value from serverside please help me in this regard.

What I did is to use HiddenField to store the key.

So I created a javascript function that would populate this HiddenField value from the client event ( when user selects an item from the list )

then from the server-side I can still access the same HiddenField with the updated value.

So far it has been a royal pain. The supposed documentation link mentioned above...

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

either is so old that it doesn't work or they are nuts.

I have a web page that has several options that a user might want and I use multi-views to deliver these.  In one of the views I have four checkboxes for the user to choose among.  I have four autocomplete instances to complement the four checkboxes.  My calls to the database and my loading the autocomplete with a key/value pair is now working fine (after a couple day searching and trying a bunch of crap).

Reading the "documentation" I have to write some javascript to intercept the selection. Then to hook it up I am to define the OnClientItemSelected property with the function name I made in the javascript.  Sounds simple - doesn't work, but still simple.

Next I am to some how (no documentation given) extract the key/value pair and trigger a server-side event. The "documentation" as shown will not cause an event to fire on the client. Then since the event never fires there is no chance of sending anything to the server (even if we knew how to do that.)

People like me have to search endlessly and read hundreds of blogs and posts trying to find clues to something that should be simply written down.  I never have understood why someone doesn't put up a complete post. I do. Imagine the time that would be saved by the developers if they actually showed us how to use it the way they intended it to be used.  But no, that is far too simple.  No the "norm" is to write simple partial routines of snippet code that doesn't work to give the community a hint of what is supposed to be done.  And then to repeat that flawed process over and over.

So is anyone up to the task? Can a working example actually be wrtten? Is there anyone out there who can actually demonstrate how to postback a value pair in a single aspx page with codebehind?

Larry Aultman

As I said the client side even does not fire as written. If you add the () to the declaration the event fires but naturally the signatures don't match so the call fails.

Here is what DOES NOT WORK to save you some time...

<script language="javascript" type="text/jscript">

var textBoxcoName; //alias to the tbcoName textbox name

var hiddenTextValue; //alias to the hidden field: hideValue

var hiddenUserID; //alias to the hidden field: hideUserID

textBoxcoName = $get("<%=tbcoName.ClientID %>"); //gets the fully resolved name for the textbox control

</script>

....some html page formatting ...

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" EnablePageMethods="true"></asp:ScriptManager>

<asp:HiddenField ID="hideValue" runat="server" />

... some more html page formatting ...

<asp:TextBox ID="tbcoName" runat="server" CssClass="txtBx"></asp:TextBox>

EnableCaching="true"

CompletionListCssClass="autocomplete_completionListElement"

CompletionListItemCssClass="autocomplete_listItem"

MinimumPrefixLength="2"

ServiceMethod="getCompanyNames"

OnClientItemSelected="AutoCompleteExtender2_ItemSelected">

</cc1:AutoCompleteExtender>

wph101larrya,

I have also been having issues getting the client side functionality to work.  I'm gonna paste my code due to your rant, but I noticed nothing that was really "different" between our 2 examples.

 
 This is the InsertItemTemplate inside of my FormView:

<InsertItemTemplate>
            <table>
                <tr>
                    <td class="infolabel">
                        To:
                    </td>
                    <td>
                        <asp:TextBox ID="toTextBox" runat="server" Width="300px" Text='<%# Bind("to") %>'
                            SkinID="CustomTextBox" />
                        <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="toTextBox"
                            ServicePath="~/MyWebService.asmx" ServiceMethod="GetEmailContacts" MinimumPrefixLength="2"
                            EnableCaching="true" CompletionInterval="1000" FirstRowSelected="true" OnClientItemSelected="AutoCompleteSelected">
                        </cc1:AutoCompleteExtender>
                    </td>
                </tr>
                <tr>
                    <td class="infolabel">
                        Subject:
                    </td>
                    <td>
                        <asp:TextBox ID="subjectTextBox" runat="server" Width="300px" Text='<%# Bind("subject") %>'
                            SkinID="CustomTextBox" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" class="infolabel">
                        Message:
                    </td>
                    <td>
                        <asp:TextBox ID="contentTextBox" runat="server" Text='<%# Bind("content") %>' Rows="8"
                            Width="300px" TextMode="MultiLine" SkinID="CustomTextBox" />
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
                            Text="Send" />
                         <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False"
                            CommandName="Cancel" Text="Cancel" />
                    </td>
                </tr>
            </table>
        </InsertItemTemplate>

Here is my javascript:

    <script type="text/javascript">
        function AutoCompleteSelected(source, eventArgs)
        {
            alert(eventArgs.get_text() + " " + eventArgs.get_value());
        }
    </script>

 And here is my Web Service:

public string[] GetEmailContacts(string prefixText, int count)
    {
        string[] OUTPUT = new string[count];
        prefixText = prefixText.ToLower();
        MembershipUserCollection c = (MembershipUserCollection)Membership.GetAllUsers();
        int i = 0;
        do
	    {
	        foreach (MembershipUser user in c)
            {
                ProfileCommon userprofile = (ProfileCommon)ProfileCommon.Create(user.UserName);
                if (user.UserName.ToLower().Contains(prefixText) || user.Email.ToLower().Contains(prefixText) || userprofile.FirstName.ToLower().Contains(prefixText) || userprofile.LastName.ToLower().Contains(prefixText))
                {
                    OUTPUT[i] = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(String.Format("{0} {1} ({2})", userprofile.FirstName, userprofile.LastName, user.Email), userprofile.ID.ToString());
                    i++;
                }
            }
            break;
	    } while (i < count);
        
        return OUTPUT;
    }

As you can see the implementation is pretty much the same.  Either way, what got it working for me was simply to download the newest version of the Toolkit and update my assemblies.  I hope this helps.
 

i m using more then 1 control for assign a vlaue my code like this

JS

var hdnKpiID_1 = '<%=hdnKpiID_1.ClientID%>';

var hdnKpiID_2 = '<%=hdnKpiID_2.ClientID%>';

var hdnKpiID_3 = '<%=hdnKpiID_3.ClientID%>';

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

// document.getElementById(hdnKpiID_2).value = eventArgs.get_value();

// document.getElementById(hdnKpiID_3).value = eventArgs.get_value();

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

// document.getElementById(hdnKpiID_2).value = eventArgs.get_value();

// document.getElementById(hdnKpiID_3).value = eventArgs.get_value();

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

// document.getElementById(hdnKpiID_2).value = eventArgs.get_value();

// document.getElementById(hdnKpiID_3).value = eventArgs.get_value();

</script>

 and html

Hooray!!!!!!!

i got solution

Just replace Your ajaxToolkit.dll with new version.

thnx & regards

Faq

Will this work with Master page? I am using the latest 3.5 dll (AjaxControlToolkit.dll)

I am able to set the value in the javascript ( alert is showing the value), but during postback the value is empty. Any solution?