如何使用单输入键在文本框上的自动填充中执行搜索

本文关键字：填充 搜索 执行 文本 单输入 何使用 输入 | 更新日期: 2023-09-27 18:21:47

<div style="position: absolute; top: 841px; left: 12%;">
    <asp:TextBox ID="txtHotel" runat="server" CssClass="search_hot_txtbox" ></asp:TextBox>   
</div>
<br>
<script type="text/javascript">
    $(function fnc() {
    $(".search_hot_txtbox").autocomplete({
            source: function(request, response) {
                $.ajax({
                url: "hotel-result.aspx/BindDatatoDropdown",
                    data: "{ 'cn': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        response($.map(data.d, function(item) {
                            return {
                                value: item.HotelName
                            }
                        }))
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        //                            alert(textStatus);
                    }
                });
            },
            minLength: 2
        });
    }); 
</script>


 protected void chk3_CheckedChanged(object sender, EventArgs e)
    {
        if (Session["List"] != null)
            UCPager1.GetItemsControl(1, 5, 0, chk3star.Checked, chk2star.Checked, chk1star.Checked, chk4star.Checked, chk5star.Checked, chkP1.Checked, chkP2.Checked, chkP3.Checked, chkP4.Checked, chkP5.Checked, txtHotel.Text, spP1.InnerText, spP2.InnerText, spP3.InnerText, spP4.InnerText, spP5.InnerText, new Repeater(), chkP6.Checked, chkP7.Checked, chkP8.Checked, spP6.InnerText, spP7.InnerText, spP8.InnerText);
        else
            UCPager1.GetItems();
    }

如何使用单输入键在文本框上的自动填充中执行搜索

您需要在此处进行回发，当您在文本框上按"enter"时，浏览器会进行回发。但如果您希望使用javascript进行回发则需要启动按钮控件。

所以我放置了一个按钮控件，我甚至可以用css将其隐藏为：

<div style="position: absolute; top: 841px; left: 12%;">
    <asp:TextBox ID="txtHotel" runat="server" CssClass="search_hot_txtbox" onkeydown="return SendKeyEnterTo(event, 'btnGo');" />
    <asp:Button runat="server" ID="btnGo" Text="search" onclick="btnSearch_Click" style="display:none;" ClientIDMode="Static" />
</div>

然后使用这个简单的javascript，我从文本框中读取"回车"键，并触发输入控件的postback。

function SendKeyEnterTo(e, IdToClick)
{
    // look for window.event in case event isn't passed in
    if (window.event) 
    { 
        e = window.event; 
    }
    if (e.keyCode == 13)
    {
        document.getElementById(IdToClick).click();
        return false;
    }
    else
    {
        return true;
    }
}

这个onkeydown="return SendKeyEnterTo(event, 'btnGo');"对于读取文本框输入很重要，而按钮上的ClientIDMode="Static"对于在呈现时保持相同的id很重要。

此外，请注意，此代码与自动完成程序一起运行，我已经测试并使用了它。

相关文章：