ドロップダウンの候補を検索

Question

以下の提案以外のドロップダウンリストを持つ入力ボックスを作成するより良い方法はありますか？

<div id="dropdown-group" class="input-group dropdown"> 
    <input id="keyword" type="search" class="form-control"> 

    <ul id="suggestion-list" class="dropdown-menu"> 
     <li> 
      <a href="link"> 
       <img class="img-sm" src="img_path"> 
       <span>name</span> 
      </a> 
     </li> 
    </ul> 
</ul> 

input-group、dropdown、form-controlとdropdown-menuはすべてブートストラップクラスです。 ユーザが検索入力フィールド（#keyword）に入力するときに、vuejsとajaxを使用して、順序なしリスト（#suggestion-list）を入力します。 私は入力を聴いてフォーカスを得て、ブートストラップクラスopenを追加して削除し、ドロップダウンリストを開いて閉じます。私は故意にそのjavascriptコードをスキップしてhtmlとcssに焦点を当てました。

欠落しているのは、矢印キーを押して候補リストを参照する機能です。

このようなリストを設計するより良い方法はありますか？

Answer 1

約thisです。それは実際にはhereでご覧ください。あなたがしたいことは重要ではありません。いつもよりスマートで速い人がいます。