CODEWITHSUNDEEP
c#asp.netautocompleteajaxcontroltoolkit
cm381
cm381

Reputation: 167

How can I add selected value in an asp.net ajax toolbox autocomplete to a label?

I have got the Ajax toolkit autocomplete working using the following asp.net and C# code.

<form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager> 
    <div>
        Search our Languages: <asp:TextBox ID="txtLanguage" runat="server"></asp:TextBox>

        <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
            TargetControlID="txtLanguage" MinimumPrefixLength="1" 
            ServiceMethod="GetCompletionList" UseContextKey="True">
        </asp:AutoCompleteExtender>
        <br />
        <br />
        <asp:Button ID="btnAddSelected" runat="server" Text="Add to chosen Languages >" 
            onclick="btnAddSelected_Click" />
        <br />
        <br />
        <asp:Label ID="lblSelectedLanguages" runat="server" Text=""></asp:Label>
    </div>
</form>

This is my codebehind C#:

[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string[] GetCompletionList(string prefixText, int count, string contextKey)
{
    // Create array of languages. 
    string[] languages = { "Afrikaans", "Albanian", "Amharic", "Arabic", "Azerbaijani", "Basque", "Belarusian", "Bengali", "Bosnian", "Bulgarian" };

    // Return matching languages. 
    return (from l in languages where l.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase) select l).Take(count).ToArray();
}

protected void btnAddSelected_Click(object sender, EventArgs e)
{
    lblSelectedLanguages.Text += txtLanguage.Text += ", ";
}

The selected language is added to the label when the button is clicked, however I would like to remove the button and make the selected item from the autocomplete added to the label automatically, using the partial postback from the Ajax toolkit.

Can someone please advise as to how I can achieve this?

Thanks.

Upvotes: 2

Views: 4851

Answers (2)

abidmix
abidmix

Reputation: 1748

It looks like you just need to hook onto the on text changed event of your text box and then put your logic in code benind.Something like this

Markup

<asp:TextBox ID="txtLanguage" OnTextChanged="txtLanguage_textChanged" AutoPostback="true" />

Then in your code behind

  protected void txtLanguage_textChanged(object sender, EventArgs e)
  {
      //use  the retrieved text the way you like
       lblSelectedLanguages.Text =txtLanguage.Text;
   }

Hope this helps.I would also suggest that you try looking into the JQuery autocomplete widget.It has brought me sheer happiness and I surely did divorce the autocomplete extender. Jquery Autocomplete

Upvotes: 0

Denys Wessels
Denys Wessels

Reputation: 17049

  1. Handle OnClientItemSelected on the AutoCompleteExtender control to run a javascript function
  2. All the javascript does is simply fire off the TextChanged event when the selection is made (works on both Enter and left click)

ASPX:

<head runat="server">
    <title></title>
    <script type="text/javascript">
        function ItemSelected(sender, args) {
            __doPostBack(sender.get_element().name, "");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            Search our Languages:&nbsp;
            <asp:TextBox ID="txtLanguage" autocomplete="off" runat="server" OnTextChanged="TextChanged" />
            <asp:AutoCompleteExtender OnClientItemSelected="ItemSelected" ID="AutoCompleteExtender1"
                runat="server" TargetControlID="txtLanguage" MinimumPrefixLength="1" ServiceMethod="GetCompletionList"
                UseContextKey="True">
            </asp:AutoCompleteExtender>
            <br />
            <asp:Label ID="lblSelectedLanguages" runat="server"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>

Code behind:

protected void TextChanged(object sender, EventArgs e)
{
    lblSelectedLanguages.Text += txtLanguage.Text += ", ";
}

Upvotes: 3

Related Questions