Arrow keys autosuggest

[DamzWildfire]

i want to select items from the result set using the arrow keys as well as the mouse how do i do this the code i added doesnt seem work work and i think its incomplete:

$(document).ready(function() {
  $('.dropdown').hide();
    $('.autosuggest').keyup(function (e) {
// we also have to check if user is deleting entries
// in that case less than 3 characters also trigger suggestion
isDelete = false;
// if delete or backspace were pressed,
// less than 3 characters also trigger suggestion
if( e.which == 8 || e.which == 46) {
isDelete = true;;
}
var search_term = $(this).attr('value');
// if search term does not exist or
// if it is less than 3 chars and user hasn't deleted any chars
// then hide the list
if(
search_term.length == 0 ||
(search_term.length < 1 && isDelete == false)
) {
$('.dropdown').hide();
} else {
$('.dropdown').show();
}


// check if we have at least 1 characters or user is deleting characters
if(search_term.length >= 1 || isDelete == true) {
// read the values of the select elements (drop downs)
// read the value of category
var category=$('#category').attr('value');
// this is the conditions you will post over to the searchApp.php script
// assembled here for clarity
var conditions = {
'search_term' : search_term,
'category' : category
};
// alert(conditions.toSource());
// post the conditions over to the searchApp.php script
$.post('ajax/searchApp.php', conditions, function(data) {
//alert(data);
$('.result').html(data);

// you can sort this out yourself
$('.result li').click(function() {
var result_value=$(this).text(); 
$('.autosuggest').attr('value',result_value);
//alert(result_value);
$('.result').html('');
});

});
};
});
}).keydown(function(e){
    lastKeyPressCode = e.keyCode;
                    first_focus = false;
                    switch(e.keyCode) {
                        case 38: // up
                            e.preventDefault();
                            moveSelection("up");
                            break;
                        case 40: // down
                            e.preventDefault();
                            moveSelection("down");
                            break;
                    }
    });

[LastMitch]

@DamzWildfire

i want to select items from the result set using the arrow keys as well as the mouse how do i do this the code i added doesnt seem work work and i think its incomplete

OK, autosuggest is one thing but moving arrow keys are a bit different. I assume you got it working with the autosuggest from the preivous thread.

Does the arrow keys move or it's not moving?

[DamzWildfire]

arrows not moving.

[LastMitch]

@DamzWildfire

Instead of this:

.keydown(function(e){
lastKeyPressCode = e.keyCode;
first_focus = false;
switch(e.keyCode) {
case 38: // up
e.preventDefault();
moveSelection("up");
break;
case 40: // down
e.preventDefault();
moveSelection("down");
break;
}

Try this:

$(document).keydown(function(e){
    if (e.keyCode == 38) { 
       alert( "up pressed" );
       return false;
    }else if (e.keyCode == 40) {
       alert( "down pressed" );
       return false;
    }
});

You are using JQuery. So it's best to keep it together.

[DamzWildfire]

alright i'll try it

[DamzWildfire]

tried it just the alert poped up because thats whats in the code. added the moveSelectio("up") & down function. but nothing happened.

$(document).keydown(function(e){
    if (e.keyCode == 38) {
    moveSelection("up");
    //alert( "up pressed" );
    return false;
    }else if (e.keyCode == 40) {
    moveSelection("down");
    //alert( "down pressed" );
    return false;
    }
    });

[gon1387]

Hi DamzWildfire,
There was no issue with regards to your keydown event, as your keydown event are captured anywhere on the document. It will be a much help for us and mostly to you if you'll show your code on your "moveSelection" function.

[DamzWildfire]

the code for the "moveSelection" function is the only code i have on it. not that good at jquery

[DamzWildfire]

This is what i have now as the code but that doesnt seem to work either:

$('result').keydown(function(e){
    if (e.keyCode == 38) {

    $(this).prev().focus(); 
    }else if (e.keyCode == 40) {
        $(this).next().focus(); 
    }
    });
});