2

次の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 ツールキットの部分ポストバックを使用して、オートコンプリートから選択したアイテムをラベルに自動的に追加したいと思います。

どうすればこれを達成できるかについて誰かがアドバイスできますか?

ありがとう。

4

2 に答える 2

3
  1. OnClientItemSelectedJavaScript 関数を実行するための AutoCompleteExtender コントロールのハンドル
  2. 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 += ", ";
}
于 2013-01-25T14:44:23.830 に答える
0

テキストボックスの on text changed イベントにフックして、ロジックをコードベニンドに入れるだけでよいようです。

マークアップ

<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 オートコンプリート

于 2013-01-25T14:32:57.787 に答える