Búsqueda AJAX compatible con el teclado dentro de un formulario HTML - javascript, php, jquery, ajax, keyboard-events

Tengo una forma que se parece a esto:

<form action="whatever.php" method="post">

<input type="text" onKeyUp="ajax_search()" name="search" id="search">

// THE AJAX FUNCTION UPDATES THE DIV BELOW
<div id="search_results"></div>

<input type="text" name="price" id="price">
<input type="text" name="cost" id="cost">
<input type="text" name="discount" id="discount">

<input type="submit" value="GO">

</form>

Yo tengo un AJAX funciónajax_search()) que apunta a un PHP archivo que devuelve elementos de una tabla de base de datos que son similares a lo que se ingresa en el search entrada. (... WHERE code LIKE ""$code"%")

No hay problemas hasta ahora. Los artículos devueltos se realizan en el siguiente formato:

$output .= "<p onClick="insert_item(" .json_encode($code). ")">" .$code. "</p>";

Cuando el <p> se hace clic en la etiqueta, <form> se actualiza con el elemento ($code) y toda la información relativa. ¡Esto funciona muy bien!

Ahora estoy buscando agregar en la funcionalidad del teclado a la AJAX buscar. El usuario debe poder "seleccionar" los elementos utilizando las flechas del teclado.

Leí una discusión similar aquí: Búsqueda de AJAX para teclado

La discusión no llega muy lejos y el resultado final fue que el código no funcionó para el OP.

Además, porque la search_results div se muestra entre un <form> ya y el <input id="search"> está enfocado, la tecla "ENTER" activará submit botón en lugar de llamar al insert_item() función. Puedo ser capaz de solucionar este problema por mi cuenta usando javascript if() Declaraciones y códigos ASCII.

¿Me ayudan a seleccionar los elementos buscados con las teclas de flecha del teclado?

ACTUALIZAR

He intentado dar el serached <p> artículos un <a> etiqueta para lengüeta selección. Pero cuando golpeo lengüeta, todo lo que pasa es el siguiente <input> en el <form> esta enfocado.

Respuestas

1 para la respuesta № 1

Me gustaría capturar los charCodes en una sentencia if como esta:

$("#search").on("keyup", function(e) {
if(e.charCode === 38) {  // Up arrow
e.preventDefault(); // Prevent the default action
currentSelection++; // Update the current selection
} else if(e.charCode === 40) { // Down Arrow
// ...etc....
}
});

Hay una lista bastante útil de los CharCodes aquí.

Debería poder capturar cualquiera de sus claves de esta manera (pestaña, ingresar, flechas, etc.) y prevenir sus acciones usando e.preventDefault ()

---