How to render specific fields in a search interface?

When you are building a search interface for your website or application, and you are using website pipeline, the default fields (title, description, and URL) are returned in response.

This how-to-guide explains how you can render specific fields in a search interface. In this example, we will override the default fields and render title, url, and published_time fields instead.

Instructions

You can request for any fields to be returned by mentioning them in the values object.

If you integrated your search interface using the generated code from the console, or you used website search integration directly, follow the steps below:

Locate the values object in the integration, it will be under javascript code to configure the behaviour of the search interface. It looks something like this:

<!--
      Javascript to configure the behaviour of the search interface.
      Make sure this at the bottom of the <body>.
    -->
    <script>
      var getUrlParam = function(e){var t = new RegExp("[?&]" + e.replace(/[\[\]]/g, "\\$&") + "(=([^&#]*)|&|#|$)"),a = t.exec(window.location.href);return a && a[2] ? decodeURIComponent(a[2].replace(/\+/g, " ")) : ""};
      var searchInterface = sajari.init({
          ...
          <other configurations>
          ...
          values: {"q.override": true, "resultsPerPage": "10","q": getUrlParam("q")}, // Set default values.
          tabFilters: null, // User selectable filters
          styling: { theme: { colors: { brand: { primary: "#333" }}}}
      });
    </script>

Add the fields param “fields“:”title,url,published_time” in the values object and add the fields that you want to render on your search interface. The fields should be separated by commas and shouldn't have any spaces between them. It should look like this:
```
values: {"q.override": true, "resultsPerPage": "10","q": getUrlParam("q"), "fields":"title,url,published_time"},
```
Update the modified integration code on your website. You can modify the styles by using component styling. Read more on how to modify styles here.
That’s it! The title, url, and published_time fields will be returned in response.

If you are using React SDK, update the const values:

const values = new Values(
    {"fields":"title,url,published_time"}
);

The title, url, and published_time fields will be returned in response in your React App.

Note that if the record in your collection doesn’t have values for a field, then those values will not be returned in the response. For example, if one record doesn’t have published_time value, it will still be returned in response with title and url.
If you want to only return fields that have all these three values, then you will have to use filters (e.g. "filter":"title!='',url!='',published_time>'2000-01-01'")

Learn more about Filtering Content

This Confluence instance is now read-only, please head over to the Algolia Confluence instance for the same more up-to-date information

Instructions

Related articles