Triggering keyup event on a text input programmatically

Question

To demonstrate what I want to do I use an example from W3schools here in codepen.

I have a text box that has a keyup event listener, with each character you enter it refines your search.I want to fill the textbox with text using value property of it and then trigger the keyup event so that the keyup event listener runs. But I couldn't get anything to do just that. I want to use core JS but to test it I tried it with jQuery too but no luck.

$('#mySearch').val("j"); 
$('#mySearch').keyup();

What you've tried till now, add code in your question – Abhay Sehgal Oct 13 '18 at 12:03 — Abhay Sehgal, Oct 13 '18 at 12:03

score 1 · Answer 1 · answered Oct 13 '18 at 12:40

As Math already stated, you can create a function that runs as per key press (or release in your case). The function should refine the search. I would recommend JS for this, but if you want to use jQuery, then here is what you could do:

$("#mySearch").on("keyup", function()
{
    // Refine search here
});

Or alternatively, you could just use the .keyup() function:

$("#mySearch").keyup(function()
{
    // Refine search here
});

Hope this helps

score 0 · Answer 2 · answered Oct 13 '18 at 12:23

Instead of trying to trigger the keyup event programmaticaly, you can call the function you assigned to it. So in core JS you would have :

In the HTML :

<input id="mySearch" type="text" onkeyup="myFunction()">

In the JS you create the function myFunction witch will refine you search. And when you want to change the value of your input you can call to function just after the change :

function myfunction() {
  //refine search code
}


//change the value of the input 
document.getElementById('mySearch').value = "j";
myFunction();

score 0 · Answer 3 · answered Sep 19 '19 at 11:51

As discussed here

You can use fireEvent on IE 8 or lower, and W3C's dispatchEvent on most other browsers. To create the event you want to fire, you can use either createEvent or createEventObject depending on the browser.

Here is a self-explanatory piece of code (from prototype) that fires an event dataavailable on an element:

var event; // The custom event that will be created
if(document.createEvent){
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
    event.eventName = "dataavailable";
    element.dispatchEvent(event);
} else {
    event = document.createEventObject();
    event.eventName = "dataavailable";
    event.eventType = "dataavailable";
    element.fireEvent("on" + event.eventType, event);
}

Triggering keyup event on a text input programmatically

3 Answers3