jQuery event handler for input (type text)

Question

I was trying to prepare some functionality to filter and sort data returned from db via ajax and i cant figure out one problem.

Ive seen on many websites and web applications very interesting way of handling text input fields, it works the way that you type something in and while you are typing nothing happens but if you stop for like 3 seconds it fires up and conducts ajax request, so i started to experimenting with many inbuild jquery functions but none seem to work this way.

keyup fires up on every character you provide to the field therefore no go

change requires from you to click outside of field to fire up which is terrible solution

mouseleave doesnt work with text input fields, nothing happens when you leave input

mouseout well this one works, when i move mouse outside of field it fires up but it still require from user everytime he adjust his research to move mouse in and out which is even worst then change method

input, keypress, keydown works the same as keyup they just have cosmetic differences but method stay the same so no go

So method i would want to implement is the one that fires up some time after you stop typing and doesnt require any mouse move or clicking, though i have no clue how to approach it.

HTML

<input type="text" class="adjust" />

Javascript

$('.adjust').on('change', function() {
    alert('event has fired');
});

If someone is willing to help out, ive prepared some initial jsfiddle to experiment with:

http://jsfiddle.net/eag9e/

input would be the best event to handle, as this would also fire on pasting (using the mouse) or external elements which affect the field. All you'd need to do is add a timer which gets reset every time a user inputs anything. — James Donnelly
– James Donnelly, Commented Apr 25, 2014 at 10:05

Reinstate Monica Cellio · Accepted Answer · 2014-04-25 10:07:09Z

5

Try this...

var keyupTimeoutID = 0;

$('.adjust').on('input', function() {
    clearTimeout(keyupTimeoutID);
    keyupTimeoutID = setTimeout(function() {
        alert('event has fired');
    }, 1000);
});

jsfiddle example

It creates a timeout every time the value changes, clearing any previous timeouts. I set it to 1 second, but you can obviously change that to suit.

answered Apr 25, 2014 at 10:07

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

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

1 Comment

Mevia Over a year ago

This is exactly what i was looking for, perfect, now i know how they did it ;) thank you for the help

Collectives™ on Stack Overflow

jQuery event handler for input (type text)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related