将文本写入搜索框后自动触发 Enter 按键？答案

【问题标题】：Automatically trigger an Enter key press after write text into a search box?将文本写入搜索框后自动触发 Enter 按键？
【发布时间】：2015-07-17 20:16:01
【问题描述】：

我正在编写一些代码来触发 Enter 在我将从 img alt 获得的文本放入搜索框之后。

我正在使用 jQuery 数据表。但我想在表外创建自己的过滤器。我想要点击图标来过滤表格。

因为如果你在搜索框中输入文本，jQuery DataTables 可以提取结果，我想如果我可以从 img alt 中获取文本并将文本写入搜索框，它就会进行过滤。

但是没用，需要输入。

那么我怎样才能触发 Enter 呢？或者这样做只是一个完全错误的想法？

 <img alt="High School" src="../../slack.png" class="icon"></img>
    <script>
    $(function(){
      $('.icon').on('click', function(){
       var text = $('.icon').first().attr("alt");
      $('.dataTables_wrapper .dataTables_filter input').val(text);
      $('input').submit();
      })
    })
   </script>

更新帖子。它已解决，它可以与 dataTable 一起使用。代码如下：

<img alt="High School" src="../../slack.png" class="icon" id="High School"></img>
    <img alt="Elementary School" src="../../ai.png" class="icon" id="Elementary School"></img>
<script>
var e = jQuery.Event("keyup");
e.which = 13;
$(function(){
  $('.icon').on('click', function(){
   var text = $(this).attr("id");
  $('.dataTables_wrapper .dataTables_filter input').val(text);
  $('input').trigger('keyup',e);

  })
})

【问题讨论】：

input 是否定义了事件监听器？你只能触发你定义的事件监听器，不能触发原生功能
@tymeJV 哦，我认为输入与 .dataTables_wrapper .dataTables_filter 输入的含义相同。

标签： javascript jquery triggers datatables datatables-1.10

【解决方案1】：

这样的事情怎么样？

HTML

<html>
    <head>
        <title>Your Title</title>
    </head>
    <body>
        <form action="functions.php">
            <input type="text" name="user_input" id="search">
            <button type="submit" name="search">Search</button>
        </form>
    </body>
</html>

然后在您的 javascript 代码中。添加这个：

Javascript

$(document).ready(function(){
    var search_box = $("input#search");
    search_box.on("input blur change", function(){
        $(this).closest("form").submit();
    });
});

【讨论】：

对不起，我对 php 的知识为零。并且搜索框是内置在dataTable中的，我不确定是否可以给它一个ID。 attr("id", "search")?

【解决方案2】：

“我想要点击图标来过滤表格”

我认为您使这项任务过于复杂。如果您有一个由

创建的数据表

var table = $('#example').DataTable();

如果你想在点击<img> 类.icon 时通过alt 属性进行搜索，那么你所要做的就是：

$(".icon").click(function() {
    table.search(this.alt).draw();
});

演示 -> http://jsfiddle.net/twpe2cpz/

【讨论】：

它在小提琴中工作得非常好，但是当我尝试它时，它告诉我搜索不是一个功能......
@Candtiimer，这是因为 1）您使用 dataTable() 而不是 DataTable() 进行了初始化，或，很可能 2）您在函数中初始化了 dataTable，例如一个$(document).ready()，您将变量设置为var table=，因此table 不是您声明click() 的外部范围可见的变量。抱歉耽搁了这么久。