Add the search bar to the header Menu in Service Portal

[SN Emy]

Hi All,

I need to add the search bar to the top of the page (See picture) on the Service Portal.

Can you help please?

[Pratiksha Kalam]

Hi,

OOB one widget is available name as TYPEAHEAD search.clone it.use it. 

Otherwise,

adding the following lines to the HTML part:

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

add this at the top (so it's the first li), so the search will be on the left side of the top banner

and also add this to the server side:

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

If my reply helps you at all, I’d really appreciate it if you click the Helpful button and if my reply is the answer you were looking for, it would be awesome if you could click both the Helpful and Accepted Solution buttons! 

[Rahul Raja Sami]

Hi @Pratiksha, where do we need to add these lines ? for which HTML?
HTML of new widget or the cloned widget?
After cloning the widget I have added this to a page and the page is added to menu item so that it will give us the expected result, but it is just showing the menu item name and when clicked on the menu item then I can see a search bar. why?

[martinrouxfx · Accepted solution]

Thank for the information !

But when I paste this, 

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

and this

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

I lost my Knowledge, Catalog requesuests... links

[Troya1]

Thanks Martin

I added it as the first li in the script but it still hows up wonky.