CODEWITHSUNDEEP
jquery
andrei
andrei

Reputation: 8582

jquery live search

How i can i check the value of an input field continuously after it has been focused once ? (with jquery).I'm looking to make a live search and completely remove the submit button on my form.

Upvotes: 4

Views: 4556

Answers (5)

Sparks
Sparks

Reputation: 592

Try this: 

$("#search").on("keyup",function(){
    Search(...);
}

the thing is that you need to make an avatar function that call your function that do the code

or put this html as your input html:

<input type="text" onKeyUp="Search(this.value)"/>

Upvotes: 0

hunter
hunter

Reputation: 63512

I would bind the keyup and mouseup events to the input

$("#search").keyup(Search).mouseup(Search);

function Search(event)
{
    // keyup for keyboard entry
    // mouseup for copy-pasting with the mouse        
}

After fighting with this in jsfiddle I finally came up with this:

$("#search").keyup(function(e) {
    Search(e);
}).bind("paste", function(e) {
    // have to do this so the DOM can catch up on mouse right-click paste
    setTimeout(function() { Search(e); }, 100);
});

I wasn't aware of the paste event, but clearly, it is awesome

Working example: http://jsfiddle.net/rLAxL/1/

Upvotes: 8

BrunoLM
BrunoLM

Reputation: 100322

Bind a keyup event to check the content and make a request when the content is changed. To throttle the requests use a setTimeout.

$("#input").keyup(function(e){
    if (window.liveSearch) clearTimeout(window.liveSearch);
    window.liveSearch = setTimeout(function(){

        // request results here

    }, 1000); // delay time in ms
});

To improve performance you can save the search on an object (e.g. cache["some search"] = results) and if the same request is made, you don't have to request the server again.

Upvotes: 2

Ben Lesh
Ben Lesh

Reputation: 108471

setInterval comes to mind.

Or you can just look at events like onKeyUp or onKeyDown or onClick, or onChange.

Upvotes: 0

user356808
user356808

Reputation: 

$('#<element>').bind('keyup', function() { //do something });

Upvotes: 1

Related Questions