Add search bar to the header menu on the service portal

ShouryaD · 3 weeks ago

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 · 3 weeks ago

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 · 3 weeks ago

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-