autocomplete key value pair : The Official Microsoft ASP.NET Forums

Reply

wph101larrya

Member

115 Points

31 Posts

Re: autocomplete key value pair

Nov 26, 2007 10:20 PM|LINK

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...

var textBoxcoName; //alias to the tbcoName textbox name

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

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

function pageLoad()

{

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

}

function AutoCompleteExtender2_ItemSelected(source, eventArgs )

{

alert(" Key : "+ eventArgs.get_text() +" Value : "+eventArgs.get_value());hiddenTextValue = $get("<%=hideValue.ClientID %>");

hiddenTextValue.Value = eventArgs.get_text();

hiddenUserID = $get("<%=hideUserID.ClientID %>");

hiddenUserID.Value = eventArgs.get_value();

textBoxcoName.OnTextChanged;

}

</script>

....some html page formatting ...

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

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

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

... some more html page formatting ...

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

<cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server"

EnableCaching="true"

CompletionSetCount="10"

CompletionListCssClass="autocomplete_completionListElement"

CompletionListItemCssClass="autocomplete_listItem"

CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

MinimumPrefixLength="2"

TargetControlID="tbcoName"

ServiceMethod="getCompanyNames"

DelimiterCharacters=""

OnClientItemSelected="AutoCompleteExtender2_ItemSelected">

</cc1:AutoCompleteExtender>

Reply

sntacrz411

Member

2 Points

2 Posts

Re: autocomplete key value pair

Nov 29, 2007 10:41 PM|LINK

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.

Reply

farooqbob

Member

6 Points

3 Posts

Re: autocomplete key value pair

Mar 17, 2008 05:09 AM|LINK

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%>';

function IAmSelected_1( source, eventArgs )

{

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

document.getElementById(hdnKpiID_1).value = eventArgs.get_value();

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

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

alert(document.getElementById(hdnKpiID_1).value);

}

function IAmSelected_2( source, eventArgs )

{

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

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

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

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

alert(document.getElementById(hdnKpiID_2).value);

}

function IAmSelected_3( source, eventArgs )

{

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

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

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

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

alert(document.getElementById(hdnKpiID_3).value);

}

</script>

and html

<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" minimumPrefixLength="1" ServiceMethod = "AutoCom" TargetControlID="txtKPI1" OnClientItemSelected="IAmSelected_1" ServicePath="AutoCom.asmx" EnableCaching ="true" UseContextKey='true'>

</cc1:AutoCompleteExtender>

<cc1:AutoCompleteExtender ID="AutoCompleteExtender4" runat="server" minimumPrefixLength="1" ServiceMethod = "AutoCom" TargetControlID="txtKPI2" OnClientItemSelected="IAmSelected_2" ServicePath="AutoCom.asmx" EnableCaching ="true" UseContextKey='true'>

</cc1:AutoCompleteExtender>

<cc1:AutoCompleteExtender ID="AutoCompleteExtender5" runat="server" minimumPrefixLength="1" ServiceMethod = "AutoCom" TargetControlID="txtKPI3" OnClientItemSelected="IAmSelected_3" ServicePath="AutoCom.asmx" EnableCaching ="true" UseContextKey='true'>