JQuery Keyup not populating results until a space is executed

Question

I have the following jQuery code placed against a search bar input text box:

$(document).ready(function(){
    $("#q").keyup(function(event){
      event.preventDefault();
      $.post("newsearch.php",{q:$("#q").val()}, function(data){
         $("#inboxHolder").html(data);          
      });
   });
});

Its a bit glitchy. Results are populating correctly, but for example on some occasions I have to execute a space after I type my query for the results to populate.

Any feedback would be greatly appreciated.

Not what you're asking, but do you really want a post on _every_ keyup event? For any halfway-competent typist that's five posts per second. It's more usual to build in a little delay... — nnnnnn, Jun 02 '13 at 02:36
How do I add a delay using this: http://api.jquery.com/delay/ — somejkuser, Jun 02 '13 at 02:38
No, jQuery's `.delay()` is about delaying things in the animation queue. You can use `setTimeout()`, perhaps something like [this answer](http://stackoverflow.com/a/14319687/615754) (adjust the actual time as desired - I think 3000ms as in that link is a bit long, but something like 800ms is OK). This technique waits x ms until after the last keypress before posting; multiple keypresses within x ms generate a single post after the last one. — nnnnnn, Jun 02 '13 at 02:43
Can you help me implement it? Here is what ive got but it doesnt work: http://pastebin.com/ACCZNZHC — somejkuser, Jun 02 '13 at 02:52
Regarding the delay, here's a version that should work: http://jsfiddle.net/ZH4Y7/ (You had `var filterTimeout` declared in the wrong place, and `event.preventDefault()` in the wrong place. And I know the example I originally linked to had an `if` around `clearTimeout()` but it isn't needed.) — nnnnnn, Jun 02 '13 at 03:10

score 0 · Answer 1 · edited May 23 '17 at 12:18

I think the question you're asking is jQuery - keydown / keypress /keyup ENTERKEY detection

Try and accout for both keyup, keydown and enter.

$(document).ready(function(){
    get_key_press();
});

function get_key_press()
{
    $("#q").keyup(function(e){ 
        handle_key_press(e);
    });
    $("#q").keydown(function(e){ 
        handle_key_press(e);
    });
}

function do_search(search_string)
{
    $.post("newsearch.php",{q:search_string}, function(data){
        $("#inboxHolder").html(data);
        can_search = true;
    });
}

//simple concurrency flag
var can_search = true;

function handle_key_press(e)
{
    if(can_search)
    {
        var code = e.which; // recommended to use e.which, it's normalized across browsers
        if(code==13)e.preventDefault();
        if(code==32||code==13||code==188||code==186)
        {
            can_search = false;
            do_search($("#q").val());
        }
    }
}

If you were after a list of keycodes in regards to e.which, you can refer to this resource.

_"Try and accout for both keyup, keydown and enter."_ - OK, so how does your code account for key _down_? Why does enter matter - are you assuming the input is inside a form, in which case you'd need to prevent the default key _down_ action rather than the default key _up_ if you want to stop the default form submit. — nnnnnn, Jun 02 '13 at 02:37
I'm not particularly sure.. but from experience writing my autocomplete in C#, I noticed it was better to account for both keyboard actions in order to the make the input more responsive. But thanks for the suggestions (also updated the answer to account for `keydown`). — classicjonesynz, Jun 02 '13 at 02:44

JQuery Keyup not populating results until a space is executed

1 Answers1