How can I use the arrow keys in Jquery

Question

I'm trying to mimic the Google suggestions list with this:

function el(tid) {
    return document.getElementById(tid);
}

function addScript(u) {
    var head = document.getElementsByTagName('head')[0],
        sc2 = document.createElement('script');
    sc2.src = u;
    head.appendChild(sc2);
    setTimeout(function () {
        head.removeChild(sc2);
        sc2 = null;
    }, 600);
} //end addScript()

function suggest(data) {
    var sel = el("test");
    sel.innerHTML = '';
    for (x = 0; x < data[1].length; x++) {
        sel.innerHTML += '<li class="uli" >' + data[1][x][0] + '</li>';
    }
}


el("inp").onkeyup = function () {
    addScript("http://www.google.nl/complete/search?callback=suggest&q=" + this.value);
};

The problem is that I want to be able to come down in the suggestions list using the arrow keys, and secondary I want to show the 'current' suggestion value inside the input field. So I tried something like this using Jquery:

$("#inp").live("keydown", function (e) {


    var curr = $('#test').find('.current');
    if (e.keyCode == 40) {
        if (curr.length) {
            $(curr).attr('class', 'uli');
            curr = $(curr).next();
        }
        if (curr.length) {
            curr.attr('class', 'uli current');
        } else {
            $('#center li:first-child').attr('class', 'uli current');

        }
    }
    if (e.keyCode == 38) {
        if (curr.length) {
            $(curr).attr('class', 'uli');
            curr = $(curr).prev();
        }
        if (curr.length) {
            curr.attr('class', 'uli current');
        } else {
            $('#center li:last-child').attr('class', 'uli current');
        }
    }







    $("#inp").live("keydown", function (e) {
        var search_terms = $('li.current').text();

        if (e.keyCode == 40) {
            $('#inp').val(search_terms);
        }
        if (e.keyCode == 38) {
            $('#inp').val(search_terms);

        }

It doesn't work because (I think..) the 'current' suggestion is immediately being requested by the previous code. I have put everything over here: JS Bin

So I got it to work using onkeypress like this: `el("inp").onkeypress=function(){ addScript("http://www.google.nl/complete/search?callback=suggest&q="+this.value); }` But now it doesn't respond on the very first key press but from the second one on. Ho can I solve this? — Youss, Sep 12 '11 at 12:06
Oh no I just discovered the backspace doesn't work with keypress, so never mind... — Youss, Sep 12 '11 at 12:09

epascarello · Accepted Answer · 2011-09-12T15:33:58.537

2

Why recreate the wheel?

jQuery UI Autocomplete

Or look at other plugins

The problem with your code is you need to cancel out the arrow keypresses when you call to get the values.

el("inp").onkeyup = function () {
    //if not the arrow keys, fetch the list
    if( ... ){
        addScript("http://www.google.nl/complete/search?callback=suggest&q=" + this.value);
    }
}

Also what is with el("inp") when you are using jQuery? I expected to see $("foo").keyup( function(){} );

edited Sep 12 '11 at 15:33

answered Sep 12 '11 at 11:53

epascarello

204,599
20
195
236

I think I would have to use the ui library, which I want to avoid because its so big. But thank's for the reference. I see there is an example of how to use it with an xml file, that should do the trick. But than again I dont have the xml on my server, so that could be a problem...Any way if my 'simple' (small code) approach doesn't work I will definitely look in to it and see if it can solve my problem (and than of course except your answer) – Youss Sep 12 '11 at 12:03
I know, and I have been looking for a way to cancel out the arrow keys for a while now but there is no reference on the internet what so ever...So I really don't know how to do that. – Youss Sep 12 '11 at 15:49
I once wrote the code in Jquery but there was no change in behavior, the code did the same thing, it just looked different – Youss Sep 12 '11 at 15:50
cancel out the arrows? You just say if it is not an arrow, than call the script. lol. Opposite of what you do to move the selection with the arrows. ;) – epascarello Sep 12 '11 at 16:00
How do you say "if not an arrow"? Stating IF is much easier than stating IF NOT ;) – Youss Sep 12 '11 at 16:12
JavaScript 101 using `!` for not. `if(e.keyCode !== 38 && e.keyCode !== 40){` – epascarello Sep 12 '11 at 16:23
I have excepted your answer because it WORKS:) Yes I'm a newbie but I want to finish my first project before learning javascript. So far I managed using Jquery. Thank you very much:) – Youss Sep 12 '11 at 17:04

How can I use the arrow keys in Jquery

1 Answers1