Автоматически запускать нажатие клавиши Enter после ввода текста в поле поиска?

Я пишу некоторый код для запуска Enter сразу после того, как я поместил текст, который я получил от img alt, в поле поиска.

Я работаю с jQuery DataTables. Но я хочу создать свой собственный фильтр вне таблицы. Я хочу, чтобы значки щелкали, чтобы отфильтровать таблицу.

Поскольку 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);

  })
})

javascript jquery triggers datatables datatables-1.10
person Candtiimer    schedule 17.07.2015    source источник
comment
Определен ли для этого input прослушиватель событий? Вы можете запускать только те прослушиватели событий, которые вы определяете, а не собственные функции.   -  person tymeJV    schedule 17.07.2015
comment
@tymeJV о, я думал, что ввод означает то же самое, что ввод .dataTables_wrapper .dataTables_filter.   -  person Candtiimer    schedule 18.07.2015

Ответы (2)


arrow_upward
0
arrow_downward

Как насчет чего-то подобного?

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();
    });
});
person Zahid Saeed    schedule 17.07.2015
comment
Извините за мои нулевые знания о php. И окно поиска встроено в dataTable, я не уверен, что смогу просто дать ему идентификатор. атрибут(идентификатор, поиск)? - person Candtiimer; 18.07.2015

arrow_upward
0
arrow_downward

"Я хочу иметь значки для фильтрации таблицы"

Мне кажется, вы слишком усложняете эту задачу. Если у вас есть таблица данных, созданная

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

тогда все, что вам нужно сделать, если вы хотите выполнить поиск по атрибуту alt при нажатии на <img> с классом .icon :

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

демо -> http://jsfiddle.net/twpe2cpz/

person davidkonrad    schedule 18.07.2015
comment
он работал очень хорошо в скрипке, но когда я попробовал, он сказал мне, что поиск не является функцией... - person Candtiimer; 20.07.2015
comment
@Candtiimer, это потому, что 1) вы инициализировали с помощью dataTable(), а не DataTable(), или, скорее всего, 2) вы инициализируете dataTable внутри функции, например $(document).ready(), где вы устанавливаете переменную как var table=, и таким образом, table не является переменной, видимой для внешней области, из которой вы объявляете click(). Извините за долгую задержку. - person davidkonrad; 24.07.2015