HTMLフォーム内のキーボードに優しいAJAX検索 - javascript、php、jquery、ajax、keyboard-events

次のようなフォームがあります。

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

を持っています AJAX 関数 （ajax_search()）それは PHP データベーステーブルから、入力されたものと同様のアイテムを返すファイル search 入力。 （（... WHERE code LIKE ""$code"%"）

今のところ問題ありません。返されるアイテムは、次の形式で行われます。

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

いつ <p> タグをクリックすると、 <form> アイテムで更新されます（$code）およびそのすべての相対情報。これはうまく機能します！

私は今、キーボード機能をに追加しようとしています AJAX 探す。ユーザーは、キーボードの矢印を使用してアイテムを「選択」できる必要があります。

私はここで同様の議論を読みました： キーボードフレンドリーなAJAX検索

議論はそれほど進んでおらず、最終的な結果として、コードはOPに対して機能しませんでした。

また、 search_results divは <form> すでにそして <input id="search"> フォーカスされている場合、「ENTER」キーはアクティブになります submit を呼び出す代わりにボタン insert_item() 関数。私はこの問題を自分で解決できるかもしれません javascript if() ステートメントとASCIIコード。

キーボードの矢印キーを使用して検索したアイテムを選択するのを手伝ってください。

更新

私はセラチを与えてみました <p> アイテムと <a> のタグ タブ 選択。しかし、私がヒットしたとき タブ、起こるのは次のことだけです <input> の中に <form> 焦点が合っている。

回答：

回答№1は1

次のようなifステートメントでcharCodesをキャッチします。

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

charCodesのかなり役立つリストがあります ここに.

この方法でそれらのキー（タブ、入力、矢印など）をキャッチし、e.preventDefault（）を使用してそれらのアクションを防ぐことができるはずです。

---