1

Пытаюсь сделать аналог вот такого блока (Прямые рейсы авиакомпании). Пишу логику фильтра у поля "поиск":

введите сюда описание изображения

На каждое изменение значения в поле прохожу по списку маршрутов и скрываю те из них, в названии которых нет подстроки введённой в поле "поиск".

Подвесил обработчик на событие jquery change - всё работает но change наступает при потере полем фокуса, а мне нужно, чтобы обработчик запускался и тогда, когда фокус ещё на поле поиска.

Как это сделать?

1

3 ответа 3

5

Абстрактный пример для демонстрации работы обработчика событий keyup и input (пригодится как минимум для ситуации, когда текст в <input> вставлен через контекстное меню, вызываемое при клике правой клавишей мыши по <input>):

$(document).ready(function() {
    var $elements = $('#list .element');
    $('#select').on('keyup input', function() {
        var value = this.value;
        $elements.hide();
        $elements.filter(':contains("' + value + '")').show();
    });
});
<input id="select" />
<ul id="list">
    <li class="element">Париж</li>
    <li class="element">Лондон</li>
    <li class="element">Москва</li>
    <li class="element">Мадрид</li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3
  • 1
    Не хватает события "input" для отслеживания, в том числе и копипаста.
    – Deonis
    16 июл 2015 в 9:12
  • @Deonis разве что для вставки с помощью мыши. Для Ctrl + V или Shift + Insert keyup вполне достаточно. Добавил в ответ событие input.
    – Regent
    16 июл 2015 в 9:22
  • Дык, именно про мышь и идет речь. )) А изменение значений с помощью "shortcuts" - это те же клавиатурные события.
    – Deonis
    16 июл 2015 в 11:45
4
$('input').on('input keyup', function(e) {
    //детаем дело
});
4
  • Работает, но не отслеживает backspace =(
    – maler1988
    16 июл 2015 в 9:35
  • 1
    Работать должно. У вас какой браузер?
    – pavelip
    16 июл 2015 в 9:58
  • @maler1988 в обоих ответах используются события input и keyup, которые вместе покрывают все адекватные способы ввода и изменения данных у <input> пользователем. Причем тот же backspace должен работать благодаря keyup даже в старых IE.
    – Regent
    16 июл 2015 в 11:50
  • Спасибо, работает. У меня Firefox + Chrome
    – maler1988
    21 июл 2015 в 10:00
1

Одного input достаточно. При использовании дополнительно метода keyup и при нажатии на кнопку клавиатуры возникают два события. Соответственно, если идёт запрос на сервер, то либо туда пойдут два запроса, либо нужно будет изгаляться и отсекать лишние. Так что, если вам неинтересны браузеры ниже Internet Explorer 10, то это лишняя заморочка.

$('elem').on('input', function(e) {
    //делаем дело
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.