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 can be requested when building 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:
| Code Block |
|---|
<!--
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:
...
| Info |
|---|
The interface created via the console uses the Website Search Integration which does not allow you to render other fields as it is built specifically for website search. |
Instructions
Use the "fields" parameter in your query to specify the fields you want in the response. For example, the following query will return title, url, and published_time field.
| Code Block |
|---|
{ "q": "", "filter": "_id != ''", "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 the React SDK, update the const values:you will need to:
Request the fields you want using the values object
| Code Block |
|---|
const values = new Values(
{"fields":"title,url,published_time"}
); |
The title, url, and published_time fields will be returned in response in your React App2. Remap the fields or use a custom renderer to render fields in the results component.
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'" or use an IS_NOT_NULL operator feature - which is available only on our latest version)
Documentation
...