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
– Nazar, Commented Sep 15, 2011 at 7: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
– Nazar, Commented Sep 15, 2011 at 7:25

Community · Accepted Answer · 2017-05-23 10:26:56Z

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, 2017 at 10:26

CommunityBot

11 silver badge

answered Sep 15, 2011 at 7:36

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nazar Over a year ago

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

Jens Roland · Accepted Answer · 2011-09-15 07:24:04Z

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, 2011 at 7:24

Jens Roland

27.8k15 gold badges86 silver badges105 bronze badges

3 Comments

Nazar Over a year ago

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 Over a year ago

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.

Jens Roland Over a year ago

Sure, but if it were me, I would do .textchange(autocomplete_handler) and a separate .keydown(arrows_and_enter_handler)

RationalRabbit · Accepted Answer · 2021-01-30 03:49:09Z

0

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);

answered Jan 30, 2021 at 3:49

RationalRabbit

1,06714 silver badges21 bronze badges

Collectives™ on Stack Overflow

Trigger keypress(keydown) with jQuery

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related