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;
                    }
    });
Member Avatar for 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?

arrows not moving.

Member Avatar for 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.

alright i'll try it

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;
    }
    });

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.

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

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(); 
    }
    });
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.