Trigger keypress(keydown) with jQuery

Question

I did my homework and checked lots of questions but still couldn't find something that I can get to work.

I have a search input. When user clicks on example, I want the word "doctor" be written in my search input letter by letter. I could have done that by changing $("#search").val() long ago, but here is the problem. When normally user types into search input autocompletion div is coming out. It is triggered by keydown event. If i just change the val attribute of input, the autocomplete div won't come out, so I need to somehow trigger keydown event so it will come out.

I found this solution:

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

but I couldnt get it to work. Any ideas please?

Here is how html looks:

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

My title says keydown event, but apparently that can only be achieved with keyup event, so in the code I used keyup instead. Anyways, none is working for me. — Nazar, Sep 15 '11 at 07:21
I also tried to use e.which instead of e.keyCode there. Still nothing happens to change. The script works untill the focus() event. The input gets focused and script appears to stop executing. — Nazar, Sep 15 '11 at 07:25

score 9 · Accepted Answer · edited May 23 '17 at 10:26

9

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

ref: Definitive way to trigger keypress events with jQuery

edited May 23 '17 at 10:26

Community

1
1

answered Sep 15 '11 at 07:36

Rafay

30,950
5
68
101

I guess I found an answer that works for me from the link that you provided, though I looked at it before I never noticed one comment. Quoting comment of @Nadia Alramli: > No you miss understood the concept. This is not how is it supposed to > work. trigger will only call the event handler. It will not actually > print the key. If you want to simulate the effect of printing the key, > then just add the key to the input value and trigger the event at the > same time. – Nadia Alramli May 7 '09 at 0:21 – Nazar Sep 15 '11 at 08:08

score 0 · Answer 2 · answered Jan 30 '21 at 03:49

If you are using jQuery autocomplete, forcing a keypress doesn't do the trick. Force an autocomplete. You might have to delay it a bit:

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

score 0 · Answer 3 · answered Sep 15 '11 at 07:24

0

A better way is to trigger your autocomplete on a textChange event rather than keyup/down. That way you can use $("#search").val() the easy way and the autocompleter will be triggered.

Added bonus: If you use textChange it will also trigger the autocomplete if the user copy-pastes text using the mouse context menu, etc. (and it won't trigger on tabbing or arrow keys)

answered Sep 15 '11 at 07:24

Jens Roland

27,450
14
82
104

Thanks for the response! I surely will check this out. I didn't know such an event is possible. However I filtered my keydown so if arrows are pressed, it won't fire autocomplete. – Nazar Sep 15 '11 at 07:29
I just realized that I need to trigger keypress anyway, because when user will press on example, the _doctor_ word will be typed, and the autocomplete div will come out. Then I will need to trigger down arrow once and enter key once so it will go to the url of the first suggestion in autocomplete div. It is supposed to be something like a demo. – Nazar Sep 15 '11 at 07:39
Sure, but if it were me, I would do `.textchange(autocomplete_handler)` and a separate `.keydown(arrows_and_enter_handler)` – Jens Roland Sep 15 '11 at 08:06

Trigger keypress(keydown) with jQuery

3 Answers3