Как вызвать функцию onclick, когда пользователь вводит ключевые слова? Jquery

Question

У меня есть поле ввода

<input type="text" name="search" id="search" />
<img src="icon.png" alt="" id="doSearch" />

Я использую Jquery, и у меня есть событие onclick для "doSearch". Поэтому, когда я ввожу некоторые слова, такие как «ab» .. и нажимаю «иконку», он отправляет запрос ajax в php-файл и возвращает результаты обратно, добавленные в dom.

  $('#doSearch').click(function() {
    $(".showResults").show("fast");
    var input_text = $('input[name="search"]').val(); //retrieve text
    $.ajax({
        method: "get" ...
        ... some more lines 
    }) etc etc

Мне интересно, как я могу автоматически запускать функцию onclick, когда некоторые символы вводятся в поле ввода, чтобы пользователям не приходилось нажимать на значок изображения, чтобы получить результаты. Кроме того, как я могу установить фокус на значке изображения, когда я нажимаю клавишу табуляции в поле ввода.

Большое спасибо за вашу помощь.

EDIT:

У меня есть и другие поля ввода в той же форме. Таким образом, этот ввод действует как-то похоже на ввод тегов переполнения стека.

Answer 1

Правильный способ сделать это будет сделать:

<form id='search'>
<input type="text" name="search" id="search" />
<input type="image" src="icon.png" />    
</form>

Таким образом, изображение будет кнопкой отправки формы, и всякий раз, когда пользователь нажимает , введите событие отправки формы будет запущено, и вы сможете делать то, что хотите.

Вот как вы можете сделать jQuery:

$('#search').submit(function() {
    // do what you were doing
    return false; // prevent form submission
});

Это также даст возможность дружелюбно относиться к людям с отключенным Javascript, так как вы можете проверить на сервере, не является ли он запросом AJAX, и, возможно, вместо этого отобразить полную страницу с запрошенным контентом. Я почти уверен, что это также сделает так, что TAB также перейдет к изображению.

Answer 2

Что-то в этом роде?

$('#doSearch').keyPress(function(e){
  if($(this).val()=='??') $('#doSearch').trigger('click')
});