如何将 asp.net ajax 工具箱自动完成中的选定值添加到标签？答案

【问题标题】：How can I add selected value in an asp.net ajax toolbox autocomplete to a label?如何将 asp.net ajax 工具箱自动完成中的选定值添加到标签？
【发布时间】：2013-01-09 06:28:14
【问题描述】：

我已经使用以下 asp.net 和 C# 代码使 Ajax 工具包自动完成工作。

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

这是我的 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 += ", ";
}

单击按钮时，所选语言会添加到标签中，但是我想删除按钮，并使用 Ajax 工具包中的部分回发自动将所选项目从自动完成添加到标签中。

有人可以建议我如何实现这一目标吗？

谢谢。

【问题讨论】：

标签： c# asp.net autocomplete ajaxcontroltoolkit

【解决方案1】：

在 AutoCompleteExtender 控件上处理 OnClientItemSelected 以运行 javascript 函数
所有 javascript 所做的只是在进行选择时触发 TextChanged 事件（适用于 Enter 和左键单击）

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>

背后的代码：

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

【讨论】：

【解决方案2】：

看起来你只需要挂钩文本框的 on text changed 事件，然后将你的逻辑放在代码 benind.Something 中

标记

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

然后在你的代码后面

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

希望这会有所帮助。我还建议您尝试查看 JQuery 自动完成小部件。它给我带来了纯粹的快乐，我确实确实与自动完成扩展器离婚了。 Jquery Autocomplete

【讨论】：