Add search bar to the header menu on the service portal

[ShouryaD]

Hello Team!

I have come across a scenario where I have to add search bar to the header menu in the Customer Service Portal so I cloned the header menu and added the typeahead search widget.

I also tried adding cloned typeahead search widget to the cloned header menu but through both ways I am getting the same issue which is instead of one search bar I am seeing two search bar, I also inspected it but it is showing as a single widget.

HTML code- 
<li class="search-widget">
<sp-widget widget="data.typeAheadSearch" />
</li>

Server side script- 
data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);

Attached is the image for your reference. 
 

[Omender Singh]

I think you’re seeing two search bars because the Customer Service Portal already has a search bar in the header, and your cloned header menu widget is rendering an additional one on top of that.

When you clone the header menu and add <sp-widget widget="data.typeAheadSearch" /> (plus the server script line), you introduce a second instance of the same search widget into the DOM

may be you can remove the custom <li class="search-widget">…</li> block from your cloned header menu HTML

[ShouryaD]

Hello @Omender Singh, 

Now, I called the widget directly into HTML and removed the server side script but it is still rendering as two. 

HTML code- 

<li> <widget id="typeahead-search" options="{}"></widget></li>