La barra de búsqueda se expandirá mientras el mouse esté enfocado en ella. Los resultados aparecerán cuando haga clic en la barra de búsqueda y los resultados aparecerán en el menú desplegable. Cuando selecciono un valor desplegable, la barra de búsqueda vuelve a su forma predeterminada y no puedo capturar los resultados desplegables al hacer clic y no puedo navegar por la página adecuada.

Aquí está el HTML:

 `<input type="search" class="form-control search-dropdown" placeholder="Search..." id="top-search" spellcheck="false">` `<div class="dropdown-menu dropdown-sm" id="search-dropdown" data-toggle="collapse"> <div class="dropdown-header"><a href="javascript:void(0);" class="text-overflow searchItem" data-name="text1">Text1</a></div> <div class="dropdown-header"><a href="javascript:void(0);" class="text-overflow searchItem" data-name="text2"> Text2</a></div> <div class="dropdown-header"><a href="javascript:void(0);" class="text-overflow searchItem" data-name="text3"> Text3</a></div> </div>`

CSS:

 `.form-control:focus { width:300px; position:absolute; }`

JS:

 `$(".searchItem").on("click", function(e)({ e.stopImmediatePropagation(); let searchedText = $(this).data('name'); $("div#pageContent").load('./'+searchedText+'.html'); })`

Estoy usando Bootstrap 5 para esto.