How to Customize the TypeHead Search

Aditya02
Tera Guru

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

 

Aditya02_1-1728650739821.png

 

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

 

Aditya02_0-1728652103240.png

 

 

14 REPLIES 14

Hi @Moin Kazi ,

 

Actually, while I am importing these XML files in sp_widget table I am getting this error.

 

Aditya02_0-1728890823572.png

 

Hi @Aditya02 ,

 

I hope you are using below method to import -

 

- Right Click On column Header > Import XML > attached file > Click OK

- Please also check your application scope should also be same while import.

MoinKazi_0-1728891452528.png

 

Regards

Moin

Hi @Moin Kazi ,

 

Again it was coming like the same. I don't know why.Is there any issue with the calling of that widget? Once check it here I am providing the code where this widget has been called.

 

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>

<!-- Replace the widget reference with isolve_typehead_search -->
<sp-widget widget="data.isolveTypeAheadSearch"></sp-widget>
</div>
</div>

 

CSS:

.sp-tagline-color {
color: $sp-tagline-color;
  
}
 
#homepage-search {
  .aisearch {
    --classicsponlydonotuse--rem-multipy: 1.6;
  }
}
 
Client Script:
api.controller=function($scope, $http) {
/* widget controller */
var c = this;
};
 
Server script:

var aisEnabled = $sp.isAISearchEnabled();

if (aisEnabled)
// Use the new widget name isolve_typehead_search
data.isolveTypeAheadSearch = $sp.getWidget('briliance-typeaheadsearch', options);
else
data.isolveTypeAheadSearch = $sp.getWidget('briliance-typeaheadsearch', options);

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

  

Please check the brilliance typeaheadsearch widget in your widget table.

Could you provide the code for the "brilliance-typeaheadsearch" widget here?

 

Regards

Moin 

Hi @Moin Kazi ,

 

Sure i am attaching file check it once.