CMS Development

mfarnham
Contributeur | Partenaire solutions Diamond
Contributeur | Partenaire solutions Diamond

Search Input Suggestion + See More Results

Résolue

Wondering if it is possible to add a link "See all Results" to the hs-search-field__suggestions results in the Search Input module. So it would show the top suggestions and then below it you could click to see more, incase they don't hit enter and think that there are only 3 results.

 

Thanks

0 Votes
1 Solution acceptée
Stephanie-OG
Solution
Conseiller clé

Search Input Suggestion + See More Results

Résolue

Hi there!

 

In the Design Tools, if you find the "Site Search Input" module, you should be able to clone and customise it. 

 

In the JavaScript section you'll see the following: 

 

  fillSearchResults = function(response){
    var items = [];
items.push( "<li id='results-for'>Results for \"" + response.searchTerm + "\"</li>" ); response.results.forEach(function(val, index) { items.push( "<li id='result" + index + "'><a href='" + val.url + "'>" + val.title + "</a></li>" ); });

The first items.push sets the "Results for", then there's a loop with the results after which you can add another items.push with your "See More" option, like this: 

 

  fillSearchResults = function(response){
    var items = [];
    items.push( "<li id='results-for'>Results for \"" + response.searchTerm + "\"</li>" );
    response.results.forEach(function(val, index) {
      items.push( "<li id='result" + index + "'><a href='" + val.url + "'>" + val.title + "</a></li>" );
    });
    items.push( "<li id='see-more'><a href='/hs-search-results?term=" + response.searchTerm+ "'><b>See More</b></a></li>" );

I've used <b>See More</b> to set it bold but you can replace that with your HTML and text. You can also use #see-more to style it in your CSS.

 

Note that I've used /hs-search-results for the URL but, if you've customised this in your settings under Website > Pages > System Pages where it says "Search results page URL" you'll want to update it accordingly.

 

UPDATE: I was due a blog post on my site anyway, so I added in this with just a little more detail - How to Customise your HubSpot Site Search Modules

 

I hope that helps!

 

Stephanie

 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

Voir la solution dans l'envoi d'origine

2 Réponses
Stephanie-OG
Solution
Conseiller clé

Search Input Suggestion + See More Results

Résolue

Hi there!

 

In the Design Tools, if you find the "Site Search Input" module, you should be able to clone and customise it. 

 

In the JavaScript section you'll see the following: 

 

  fillSearchResults = function(response){
    var items = [];
items.push( "<li id='results-for'>Results for \"" + response.searchTerm + "\"</li>" ); response.results.forEach(function(val, index) { items.push( "<li id='result" + index + "'><a href='" + val.url + "'>" + val.title + "</a></li>" ); });

The first items.push sets the "Results for", then there's a loop with the results after which you can add another items.push with your "See More" option, like this: 

 

  fillSearchResults = function(response){
    var items = [];
    items.push( "<li id='results-for'>Results for \"" + response.searchTerm + "\"</li>" );
    response.results.forEach(function(val, index) {
      items.push( "<li id='result" + index + "'><a href='" + val.url + "'>" + val.title + "</a></li>" );
    });
    items.push( "<li id='see-more'><a href='/hs-search-results?term=" + response.searchTerm+ "'><b>See More</b></a></li>" );

I've used <b>See More</b> to set it bold but you can replace that with your HTML and text. You can also use #see-more to style it in your CSS.

 

Note that I've used /hs-search-results for the URL but, if you've customised this in your settings under Website > Pages > System Pages where it says "Search results page URL" you'll want to update it accordingly.

 

UPDATE: I was due a blog post on my site anyway, so I added in this with just a little more detail - How to Customise your HubSpot Site Search Modules

 

I hope that helps!

 

Stephanie

 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

mfarnham
Contributeur | Partenaire solutions Diamond
Contributeur | Partenaire solutions Diamond

Search Input Suggestion + See More Results

Résolue

Thanks

0 Votes