如何在堆栈溢出网站中实现搜索文本框？答案

【问题标题】：How to implement search textbox as in stack overflow website?如何在堆栈溢出网站中实现搜索文本框？
【发布时间】：2014-12-06 03:06:27
【问题描述】：

我在网页中有一个搜索文本框。当用户在该文本框中输入文本后按 Enter 键时，应该执行搜索功能。如何做到这一点？

【问题讨论】：

标签： javascript html asp.net forms

【解决方案1】：

检查此事件的 onkeypress 事件并查找键码 13。一旦键码 13 被击中，点击隐藏按钮并在该隐藏按钮事件的后端进行编程。

【讨论】：

【解决方案2】：

如果表单中只有一个输入字段，那么即使没有“提交”按钮，表单也会在您按 Enter 时提交。

例如

<form action="/search">
    <input type="text" value="search text">
</form>

按下回车后会提交。

【讨论】：

我们在该页面中有多个文本框！
你需要使用 Javascript 方法——Tauren 的回答有一个例子：)

【解决方案3】：

如果这是表单中唯一的文本字段，则按 Enter 会导致 onsubmit 处理程序运行。但这将提交整个页面。如果您想在 onsubmit 上执行 ajax 命令而不刷新整个页面，请确保您的 onsubmit 处理程序返回 false。

按下回车键时进行常规的整页表单提交：

  <form action="/doit">
     <input type="text" value=""/>
  </form>

要在按下回车键时进行 ajax 表单提交，可以使用类似这样的 jquery 代码：

  $("form").submit(function() {
     $.ajax(...);
     return false;
   });

【讨论】：

【解决方案4】：

基本上你可以这样做：我喜欢将 jquery 用于大多数 javascript 内容以实现跨浏览器兼容性。

$("#btnID").keypress(function(event){
            //filter enter key only
            if(event.keyCode == 13){
                //do something here
            }
            return true;
        });

【讨论】：

【解决方案5】：

我已经很容易地实现了这个功能！我有一个搜索文本框和一个带有style ="display:none" 的按钮。这些控件被一个 ASP 面板包围，我将面板的 DefaultButton 属性设置为按钮的 ID。现在，在输入文本并按下回车键时，按钮单击事件中的搜索功能将被执行，并且该按钮对用户也是不可见的！！！

【讨论】：