Триггерное нажатие клавиши (нажатие клавиши) с помощью jQuery

Я сделал свою домашнюю работу и проверил множество вопросов, но все еще не мог найти что-то, что я мог бы приступить к работе.

У меня есть поисковый запрос. Когда пользователь нажимает на пример, я хочу, чтобы слово «доктор» было написано в моем вводе поиска буква за буквой. Я мог бы сделать это, давно изменив $("#search").val(), но вот проблема. Когда обычно пользователь вводит в поисковый ввод, появляется div автозаполнения. Он запускается событием нажатия клавиши. Если я просто изменю атрибут ввода val, div автозаполнения не выйдет, поэтому мне нужно как-то вызвать событие нажатия клавиши, чтобы оно появилось.

Я нашел это решение:

$("#example").click(function() {    
    $("#search").focus();
    var e = jQuery.Event("keyup");
    e.keyCode = 50;                     
    $("#search").trigger(e);                    
});

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

Вот как выглядит html:

<input type="text" id="search" />
Example: <span id="example">doctor</span>

keyboard jquery
person Nazar    schedule 15.09.2011    source источник
comment
В моем заголовке указано событие keydown, но, по-видимому, этого можно добиться только с помощью события keyup, поэтому в коде я вместо этого использовал keyup. Во всяком случае, ни один из них не работает для меня.   -  person Nazar    schedule 15.09.2011
comment
Я также пытался использовать e.what вместо e.keyCode. Все равно ничего не меняется. Скрипт работает до события focus(). Ввод получает фокус, и скрипт перестает выполняться.   -  person Nazar    schedule 15.09.2011

Ответы (3)


arrow_upward
8
arrow_downward 

$("#example").click(function() {    
    $("#search").focus();
    var e = jQuery.Event("keydown");
    e.keyCode = 50;                     
    $("#search").trigger(e);                    
});

ref: Окончательный способ инициировать события нажатия клавиш с помощью jQuery

person Rafay    schedule 15.09.2011
comment
Думаю, я нашел ответ, который работает для меня, по предоставленной вами ссылке, хотя я просмотрел его до того, как не заметил ни одного комментария. Цитируя комментарий @Nadia Alramli: › Нет, вы не поняли концепцию. Это не так, как это должно › работать. триггер вызовет только обработчик события. На самом деле он не будет › печатать ключ. Если вы хотите имитировать эффект печати ключа, › просто добавьте ключ к входному значению и одновременно активируйте событие. — Надя Алрамли - person Nazar; 15.09.2011

arrow_upward
0
arrow_downward

Лучше всего запускать автозаполнение по событию textChange. чем клавиша вверх/вниз. Таким образом, вы можете использовать $("#search").val() простым способом, и автозаполнение будет запущено.

Дополнительный бонус: если вы используете textChange, он также активирует автозаполнение, если пользователь копирует и вставляет текст с помощью контекстного меню мыши и т. д. (и он не срабатывает при табуляции или клавишах со стрелками)

person Jens Roland    schedule 15.09.2011
comment
Спасибо за ответ! Я обязательно проверю это. Я не знал, что такое событие возможно. Однако я отфильтровал нажатие клавиши, поэтому при нажатии стрелок автозаполнение не срабатывает. - person Nazar; 15.09.2011
comment
Я только что понял, что мне все равно нужно инициировать нажатие клавиши, потому что, когда пользователь нажмет на пример, будет введено слово doctor и появится div автозаполнения. Затем мне нужно будет один раз нажать стрелку вниз и один раз ввести ключ, чтобы он перешел к URL-адресу первого предложения в div автозаполнения. Это должно быть что-то вроде демо. - person Nazar; 15.09.2011
comment
Конечно, но если бы это был я, я бы сделал .textchange(autocomplete_handler) и отдельно .keydown(arrows_and_enter_handler) - person Jens Roland; 15.09.2011

arrow_upward
0
arrow_downward

Если вы используете автозаполнение jQuery, принудительное нажатие клавиши не поможет. Принудительное автозаполнение. Возможно, вам придется немного задержаться:

setTimeout(function()
{
    var CurrentVal = $("#example").val();
    $("#example").autocomplete( "search", CurrentVal )
},500);
person RationalRabbit    schedule 30.01.2021