Html catch, когда пользователь вводит текстовый ввод

Мне просто интересно, как я собираюсь поймать событие, когда пользователь вводит текстовое поле ввода в моем веб-приложении.

Сценарий: у меня есть сетка списков контактов. В верхней части формы пользователь может ввести имя контакта, который они пытаются найти. Когда в текстовом входе больше 1 символа, я хочу начать поиск контактов в системе, содержащих эти символы, введенные пользователем. Поскольку они продолжают вводить данные об изменениях.

Все это действительно простая функция переднего типа (или автозаполнение), но я хочу отключить данные в другом элементе управления.

Я могу получить текст из ввода, как только вход потерял фокус, но это не соответствует ситуации.

Любые идеи?

Спасибо

Ответ 1

Используйте событие keyup для захвата значения как пользовательские типы и выполняйте все, что вы делаете, для поиска этого значения:

$('input').on('keyup', function() {
     if (this.value.length > 1) {
          // do search for this.value here
     }
});

Другим вариантом будет событие input, которое ловит любой ввод, с помощью клавиш, вставки и т.д.

Ответ 2

Почему бы не использовать событие oninput HTML?

<input type="text" oninput="searchContacts()">

Ответ 3

Я использовал бы input 'и propertychange '. Они стреляют по вырезанию и вставке с помощью мыши.

Кроме того, рассмотрите debouncing ваш обработчик событий, чтобы быстрые машинистки не подвергались штрафам за многие обновления DOM.

Ответ 4

см. мою попытку:

вы должны поместить .combo после каждого .input классов.

.input - текстовое поле, а .combo - div

$(".input").keyup(function(){
    var val = this.value;
    if (val.length > 1) {
        //you search method...
    }
    if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});

$(".input").blur(function(){
    $(this).next(".combo").hide();
});