HTML表单中的键盘友好AJAX搜索

Question

I have a form that looks something like this:

<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>

I have an AJAX function ( ajax_search() ) that points to a PHP file that returns items from a database table that are similar to what is input in the search input. ( ... WHERE code LIKE '"$code"%' )

No problems so far. The items returned are done so in the following format:

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

When the <p> tag is clicked, the <form> is updated with the item ( $code ) and all it's relative information. This works great!

I am now looking to add in keyboard functionality to the AJAX search. The user should be able to 'select' the items using the keyboard arrows.

I read a similar discussion here: keyboard friendly AJAX search

The discussion doesn't go very far and the end result was that the code did not work for the OP.

Also, because the search_results div is displayed amongst a <form> already and the <input id="search"> is focused, the 'ENTER' key will activate the submit button instead of calling the insert_item() function. I may be able to sort this issue out on my own using javascript if() statements and ASCII codes.

Please help me in selecting the searched items using keyboard arrow keys?

UPDATE

I have tried giving the serached <p> items an <a> tag for tab selection. But when I hit tab , all that happens is the next <input> in the <form> is focused.

Answer 1

I would catch the charCodes in an if statement something like this:

$("#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....
    }
});

Theres a pretty helpful list of the charCodes here .

You should be able to catch any of they keys this way (tab, enter, arrows etc..) and prevent their actions using e.preventDefault()