Customizing Search Results

  • Customize search results element with additional options like defaultToImageSearch.

  • To use defaultToImageSearch, enable Image Search in the Control Panel and add the attribute to the search results div.

  • Setting data-defaultToImageSearch="true" makes the image search tab the default when searching.

  • More search results customization options are available in the Programmable Search Element Control API documentation.

In a similar way to customizing search box, you can add additional options to the search results element.

For example, in order to change our search engine from webresults-based to image-based, we can utilize the defaultToImageSearch attribute.

First of all, you need to enable Image Search in the Control Panel for your search engine. In the Setup section, in Basics tab, click the Image search option into the "on" position. After that, add the defaultToImageSearch attribute to the <div class="gcse-searchresults"></div> element on your website.

<!-- Insert your own Programmable Search Engine ID here --> <script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script> <!-- Try switching the attribute value to "true" or "false" --> 
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults" data-defaultToImageSearch="true"></div>

Now, when you search for something, the image search tab is showing as a default.

There are many more options available. You can read about other search results customization options in Programmable Search Element Control API section.

Next...

Continue to Next steps.