Question

I’ve got a “search” box that is supposed to be able to search data “live”. Right now if I attach the “keypress” event to it and update the results, it works pretty good. However, if they press backspace it doesn’t account for that (refresh the results).

I understand I can probably account for the “backspace” key.

But am I missing any other possibilities? I want any change of the text in the input to be triggering the “event” or calling the refresh function.

The one thing I don’t want to do is set “alarms” or “timers” to check every so often if it has changed.

Ideas?

Answer 1

To insure that you are triggering your data search after each changing of the text field, you should check if the text field has changed after each .keyup() or .keydown()

// The following only works for keyboard input, to handle mouse copy / paste
// see the example after this
$(function() {                         // <== Doc ready  

    var inputVal = $("input").val();   // a variable to hold the text
                                       // set it up w the initial value then see 
                                       // if the input value changes.

    $("input").keyup(function() {

        // check for change of the text field after each key up
        if(this.value != inputVal)
        {
            // Do your search, etc.
            // ...

            // Reset the temp value for the next comparison
            inputVal = this.value
        }
    });
});

Try it out with this jsFiddle

To handle mouse copy paste (which Filipe pointed out doesn’t work with the above), jQuery has the option of binding multiple events to one element, and it has a paste and cut event. The problem with these is that they are triggered immediately on paste but BEFORE the input box contents are actually changed, so we need a timeout… in fact a timeout would be a nice feature for the whole thing, so that if the user is typing quickly, then we wait until they are done:

$(function() {    // <== Doc ready  

    var inputVal = $("input").val(), // a variable to hold the text
                                     // set it up w the initial value then see 
                                     // if the input value changes.

        timer,
        checkForChange = function() {
            var self = this; // or just use .bind(this)

            // we only want to check on the input after the user has settled down,
            // so use a timeout and clear it if another input comes in
            if (timer) { clearTimeout(timer); }

            // check for change of the text field after each key up
            timer = setTimeout(function() {
                if(self.value != inputVal) {
                    // Do your search, etc.
                    $("span").html(parseInt($("span").html(),10) + 1);

                    // Reset the temp value for the next time
                    inputVal = self.value
                }
            }, 250);
        };

    $("input").bind('keyup paste cut', checkForChange);
});

So now we check for the keyboard, for pasting in, and for cutting out.

Try it out with this jsFiddle

---