Question

hey guys,
i have this weird situation where i load elements via the jquery load() method when typing in a inputfield. On every keypress i fire a doSearch() function that loads a specific page. I don’t want this doSearch() function to be fired if the arrowkeys are pressed but i need the arrow keys to navigate through the loaded elements.

This is the structure of my code right now. As you can see inside the doSearch() function i’m testing against the UP or DOWN arrow keys. If one of those is pressed the load() method is not fired. However if another key is pressed and the load-method returns a result i need the UP and DOWN arrow keys to navigate through the loaded results.

var searchTimer = 0;

$('.searchbox').keyup(function(e) {

    switch (e.keyCode) {
        //case 13: // Enter
        //case 38: // Up
        //case 40: // Down
        break;

        default:
        if (searchTimer != 0) {
            clearTimeout(searchTimer);
        }

        searchTimer = setTimeout(function () {
            doSearch(e.keyCode);
        }, 250);
    }

});

function doSearch(keyCode) {

    if ($('.searchbox').val() != '') {

        if (keyCode != 38 && keyCode != 40) {

            searchTimer = 0;

            $('#searchresults').load('/sitemap/' + ' #inner', function() {

                //modify loaded elements

                //key navigation through elements with UP and DOWN arrow keys

            });

        }
    }
}

Any idea how to solve that?
Thank you for your help.

Regards matt

Answer 1

What if you use “preventDefaut()”?

switch (e.keyCode) { 
    case 13: // Enter 
    case 38: e.preventDefault() // Up 
    case 40: e.preventDefault()// Down 
    break; 

I think this will solve your problem.