Search Input Suggestion + See More Results

[#1]

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

[#2 · Accepted solution]

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!

[#3]

Thanks