问当用户输入特殊字符(例如%)时，如何显示菜单或下拉列表？
EN

Stack Overflow用户

提问于 2022-06-13 20:07:42

回答 1查看 96关注 0票数 -1

我是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
    }
}

javascript

asp.net

asp.net-ajax

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-14 21:23:01

好的，假设有一个文本框，然后按下文本框的键。

        <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();
    }