如何在输入点击时触发搜索按钮？答案

【问题标题】：How to trigger search button on enter click?如何在输入点击时触发搜索按钮？
【发布时间】：2017-09-13 10:14:05
【问题描述】：

我在我的网站上创建了一个带有文本字段和按钮的搜索功能。我一直在尝试在输入时激活搜索，但它不起作用。我尝试了许多不同的方法，但似乎都没有奏效。我读过这个按钮可能不是“默认”的问题。我对此很陌生，所以非常感谢任何帮助！这是搜索按钮、返回按钮和搜索字段的脚本：

        <div class="w3-top">

        <div title="Clear"><a id="returnbtn" class="aa bb cc">
          <i class="fa fa-eraser"></i>
        </a></div>

        <div title="Search"><a id="searchbtn" class="aa bb cc">
            <i class="fa fa-search"></i>
        </a>

        <a class="aa bb cc">
                        <?php
                        $searchstr='';
                        $sql = "SELECT ID, ISBN, Author, Title, Publisher, ReleaseYear, Barcode FROM Books ";
                        $searchstr='';
                        if (isset($_GET['searchstr'])){
                            $searchstr=strtolower($_GET['searchstr']);  
                        }
                        if($searchstr != ""){
                            $sql.="WHERE LOWER(Author) LIKE '%".$searchstr."%' OR LOWER(Title) LIKE '%".$searchstr."%' OR LOWER(Publisher) LIKE '%".$searchstr."%'";  
                        }
                        echo "<form id='search'>";
                        echo "<input id='searchfield'/ value='".$searchstr."' autocomplete='off'>";
                        echo "</form>";
                        ?>
        </a>
        </div>
      </div>

这是搜索按钮功能

$(document).ready(function(){
 $("#searchbtn").on('click', function(){
        var newLink = UpdateCurrentLink('searchstr', $("#searchfield").val(), null);
        newLink = UpdateCurrentLink('page', 1, newLink);
        window.location = newLink;
}); 
 $("#searchfield").keypress(function(e){
     if(e.which === 13){//Enter key pressed
        $('#searchbtn').click();//Trigger search button click event
    }
 });

【问题讨论】：

使用 AJAX 使其动态化。
Simulate the href click in javascript function?的可能重复

标签： javascript php search

【解决方案1】：

捕捉每个body keypress并检查按下的键是否为Enter：试试这个：

$(document).ready(function(){
    $("body").keypress(function(e){
        if (e.which === 13){
            alert('Keypress');
            $('#searchbtn').click();
            e.preventDefault();
            return false;
        }
    });
});

【讨论】：

它会发出警报，但每次我在搜索字段中用文本按下它时都没有任何反应。例如，如果我在结果的第 3 页，按回车键后它会返回到第一个站点，而单击搜索 btn 效果很好。
它似乎正在工作，因为链接的变化方式与点击时相同，但现在我无法在搜索字段中输入任何内容。
放置 e.preventDefault 并在 } 之前返回 false ，它现在似乎正在工作。谢谢！
我做到了。它表示信誉低于 15 的用户的点赞会被记录，但不会更改公开显示的点赞分数。

【解决方案2】：

$("searchbtn").click() 函数不会触发点击事件。您必须使用触发方法。你可以这样试试——

 $(document).ready(function(){

   $("#searchField").on('keypress', function(e){
      var code = (e.keyCode ? e.keyCode : e.which);
      if(code == 13) { //Enter keycode
          //console.log('enter press');
          $("#searchBtn").trigger('click')
      }
   })

    $("#searchBtn").on('click', function(e){
       e.preventDefault();
       console.log("on submit clicked");
    })
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  
<body>
<form> 
  <input id="searchField" value=""/>
</form>
<p> <a href="#" id="searchBtn"> Search </a> </p> 
</body>
</html>

【讨论】：