How to Customize the TypeHead Search

[Aditya02]

I want to customize the home page search widget to get like this:

As of now I am getting like this, anyone help which things I need to do to get this done.

[Moin Kazi]

Hi @Aditya02 ,

Could You please share your Widget Server Side and HTML code?

[Aditya02]

Hi @Moin Kazi ,

HTML:  

<div id="homepage-search" class="hidden-xs wrapper-xl">
<div class="wrapper-xl">
<h1 class="text-3x m-b-lg sp-tagline-color">Hello! {{::data.userName}}, <br></h1>
<h3 class="text-x m-b-lg sp-tagline-color">
Welcome to the <strong>iSolve Portal</strong> How can we help <br>you today?
</h3>
<div ng-if="options.short_description" class="text-center h4 m-b-lg sp-tagline-color" ng-bind="options.short_description"></div>
<sp-widget widget="data.typeAheadSearch"></sp-widget>
</div>
</div>

CSS: 

.sp-tagline-color {

color: $sp-tagline-color;

}

#homepage-search {

  .aisearch {

    --classicsponlydonotuse--rem-multipy: 1.6;

  }

}

 Server Script:

var aisEnabled = $sp.isAISearchEnabled();

if (aisEnabled)

data.typeAheadSearch = $sp.getWidget('isolve_typehead_search', options);

else

data.typeAheadSearch = $sp.getWidget('isolve_typehead_search', options.isolve_typeahead_search);

data.userName = gs.getUser().getFirstName();

[Moin Kazi]

Everything is looking good in your code. can you try to impersonate any other user? is this issue for all users?

Or

Replace html line no 3 with this - 

<h1 class="text-3x m-b-lg sp-tagline-color">Hello {{data.userName}}, <br></h1>

And try to replace your server side last line with this-

data.userName = gs.getUser().getDisplayName();

Hope this help you

Regards

Moin

[Aditya02]

Hi @Moin Kazi ,

Actually my thing is, here I am calling a widget named typeheadsearch i am facing an issue with the typeheadsearch widget. This widget is responsible for all searches.