當用戶輸入特殊字符時如何顯示菜單或下拉列表，例如 %

Question

我是 asp.net 的新手，想問這個問題，以便有人可以指導我正確的方向。

我想要這樣的實現，如果用戶在文本框中輸入特殊字符，例如 %，則在顯示多個選項的文本框旁邊會出現一個網格/菜單/下拉列表，當用戶單擊其中一個選項時，文本會被附加到文本框中，並且網格消失。

下面是javascript代碼：

<asp:textbox id="txtUsername" runat="server" CssClass="DefaultTextBox" 
onkeypress="javascript: return Key_Press(event);">


function Key_Press(e)  
{
    var keynum;

    if (window.event) { // IE                  
        keynum = e.keyCode;
    } else if (e.which) { // Netscape/Firefox/Opera                 
        keynum = e.which;
    }
    if (keynum == 37) {// when percentage is pressed(%)
        //Code for displaying Call Webcontrol (.ascx file) 
        //Webcontrol contains the datagrid/dropdown list
        //Once any option is selected from the Webcontrol datagrid/dropdown list it 
        gets closed and text copied into text
    }
}

Answer 1

好的，所以說一個文本框，然后按該文本框的按鍵

        <asp:textbox id="txtUsername" runat="server" 
           onkeypress="return Key_Press(event);"  ClientIDMode="Static" Height="125px" Width="485px"/>

然后說我們放入一個網格視圖 - 彈出一個酒店列表，（選擇一個插入）。

所以，我們有這個：

        <div id="MyHotelPick" style="display:none">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="table table-condensed"  >
                <Columns>
                    <asp:BoundField DataField="HotelName" HeaderText="Hotel Name" ControlStyle-Width="120px" />
                    <asp:BoundField DataField="City" HeaderText="City" />
                    <asp:TemplateField HeaderText="Insert" ItemStyle-HorizontalAlign="Center">
                        <ItemTemplate>
                            <asp:Button ID="cmdInsert" runat="server" Text="Insert" CssClass="btn"
                                OnClientClick='<%# "MyInsert(\"" + Eval("HotelName") + "\");return false" %>'
                                />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>                
        </div>

好的，現在我們需要一個對話系統。 可以嘗試引導程序，但它們並不那么友好。 但是，假設您使用 jQuery，然后添加 jQuery.UI，它有一個不錯的對話框彈出系統。

所以，我們的腳本（在上面的標記之后）可以是這樣的：

        <script>
        function Key_Press(e)  
        {
            var keynum;

            if (window.event) { // IE                  
                keynum = e.keyCode;
            } else if (e.which) { // Netscape/Firefox/Opera                 
                keynum = e.which;
            }
            if (keynum == 37) {// when percentage is pressed(%)

                var ctl = document.getElementById('txtUsername');
                var startPos = ctl.selectionStart;
                endPos = ctl.selectionEnd;

                var mydiv = $("#MyHotelPick")
                mydiv.dialog({
                    modal: true, appendTo: "form",
                    title: "Insert Hotel Name", closeText: "",                       
                    position: { my: 'left top', at: 'right bottom', of: ctl },
                    width: "20%",
                    buttons: {
                        Cancel: (function () {
                            mydiv.dialog("close")
                        })
                    }
                });
                return false  // surpress the % key in text
            }
            return true
        }

       var endPos = 0
        function MyInsert(strHotel) {
            tBox = $('#txtUsername')
            sText = tBox.val()
            sText = sText.slice(0,endPos) + strHotel + sText.slice(endPos)
            tBox.val(sText)
            var mydiv = $("#MyHotelPick")
            mydiv.dialog("close")
        }
    </script>

而我們加載網格的代碼是這樣的：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadPickList();
    }

    void LoadPickList()
    {
        DataTable rstData = General.MyRst("SELECT HotelName, City FROM tblHotelsA ORDER BY HotelName");

        GridView1.DataSource = rstData;
        GridView1.DataBind();
    }

好的，所以現在當我開始在文本框中輸入並點擊 % 時，我得到了這個：

如果我點擊取消 - 沒有任何反應，但是，如果我點擊插入，那么我會得到這個：

所以，采用一個好的“對話”例程——比如 jQuery.UI 可以讓你在 div 中彈出任何東西——包括你的選擇列表。