inputタグでカーソルを保持しながらドロップダウンのリストを選択したい

実現したいこと

Googleやアマゾンの検索フォームなどでよくある検索ボックスにカーソルを表示しながら下の入力候補を矢印キーで選択する的なものを作ろうとしています．

前提

inputにカーソルを保持したまま矢印キーでliタグを選択する方法が思いつきません．
教えていただければ幸いです．

ドロップダウンにもちいる要素はなんでもいいです．「ul・li」でなくても構いません．

言語はhtml,css,jsです．

該当のソースコード

<input id="input" type="text" aria-controls="list1" aria-expanded="false" onfocus="ToggleAriaExpanded(this)">
<ul id="list1" class="sub-menu">
   <li>アイテム1</li>
   <li>アイテム2</li>
   <li>アイテム3</li>
 </ul>

<script>
   function ToggleAriaExpanded(el) {
      if ('true' !== el.getAttribute('aria-expanded')) {
         el.setAttribute('aria-expanded', 'true');
      } else {
         el.setAttribute('aria-expanded', 'false');
      }
   }
</script>

<style>
   [aria-expanded="false"]+.sub-menu {
      display: none;
   }
</style>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

CTRL-S

2024/01/13 16:01 編集

「HTML input 入力候補」で検索してみてください。知りたい事が見つかると思います。

行動規範の内容に同意します

回答1件

手っ取り早くはjQuery-uiを利用してください

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
3<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
4<script>
5$(function(){
6  $('#input').on('click focus', function () {
7    var vals=$(this).data("values");
8    $(this).autocomplete({
9    source: vals,
10    minLength: 0, 
11    delay : 1,
12    autoFocus: false,
13    scroll:true,
14    }).autocomplete("search", "");
15  });
16});
17</script>
18<input id="input" data-values="[&quot;アイテム1&quot;,&quot;アイテム2&quot;,&quot;アイテム3&quot;]">