Tengo una lista de elementos que se completan dinámicamente según los términos de búsqueda. Quiero que los elementos de la lista se puedan seleccionar/enfocar al usar las teclas arriba/abajo y ESC para ocultar el menú desplegable.

 <form> <div> <div class="field"> <input type="text" id="dropdown_input" name="query"> </div> <!-- dropdown_results inserted into DOM dynamically from search query --> <div id="dropdown_results"> <ul id="dropdown_results_ul"> <li> <a href="/example1">example1</a> </li> <li> <a href="/example2">example2</a> </li> <li> <a href="/example3">example3</a> </li> </ul> </div> </div> </form> <script> if (e.keyCode == 40) { jQuery("a:focus").parent().next().find("a").focus(); } if (e.keyCode == 38) { jQuery("a:focus").parent().prev().find("a").focus(); } </script>

Idealmente, me gustaría hacer esto usando Bootstrap5, ya que tiene compatibilidad nativa arriba/abajo/ESC para menús desplegables de botones, pero no sé cómo usarlo con elementos li cuando el padre ul se inserta en el DOM.

Ejemplo de JSFiddle: https://jsfiddle.net/eupy9Lsc/1/

Ejemplo de Bootstrap de JSFiddle: https://jsfiddle.net/jr52tomd/