Expandable search bar with dropdown values

Question

The search bar will expand while the mouse is focused on it. The results will appear when you click in the search bar and the results will appear in drop down. When I select a drop-down value, the search bar returns to its default form, and I am not able to capturing the on-click drop down results and unable to navigate the appropriate page.

Here is the 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');
})`

I am using Bootstrap 5 for this.