Customize search using CludoJS options
When implementing search on a website, the CludoJS can be used to enable/disable and customize certain features. These settings should be implemented in the CludoSettings script, where the options are defined as an object with multiple parameters.
The table below describes each available option, what it does, and examples of values.
All options are available for custom templates, while some can also be utilized for the pre-built templates (Overlay/Inline).
| Option | Overlay | Inline | Default Value | Description | Examples |
|---|---|---|---|---|---|
| allowSearchWithoutSearchword | ✅ | ✅ | false | Defines if the visitor can perform a search without entering a search word. | |
| autocompleteMinimumQueryLength | ✅ | ✅ | 1 | Defines the minimum query length before autocomplete kicks in. | |
| customCallbackAfterSearch | ✅ | ✅ | Defines a custom function that will be called after search results are ready to load. | customCallbackAfterSearch: function customCallback(){ console.log("callback"); } | |
| customNoResultsMessage | ❌ | ✅ | Defines the message the visitor sees when no results are found. | customNoResultsMessage: "Oops! No results found." | |
| disableAutocomplete | ✅ | ✅ | false | Defines if the autocomplete features will not be executed. | |
| filters | ✅ | ✅ | Defines filters to apply to the search. | filters: {"PageType": ["News article"]} | |
| sortOrder | ✅ | ✅ | Defines a page field and sorting direction (“asc” or “desc”) for ordering results. If no sortOrder is set, results default to sorting by relevance. | sortOrder: {"Title": "asc"}sortOrder: {"Date_date": "desc"} | |
| focusOnResultsAfterSearch | ❌ | ✅ | false | Defines if the focus will be moved to the search results, after a search is performed. | |
| hideResultsCount | ✅ | ✅ | false | Defines if the div tag with search count will be always hidden. | |
| hideSearchDidYouMean | ✅ | ✅ | false | Defines if the div tag with ‘Did you mean …” suggestion will be always hidden. | |
| hideSearchFilters | ✅ | ❌ | false | Defines if the div tag with filtering facets will be always hidden. | |
| hideSearchFiltersIfNoResult | ❌ | ❌ | true | Defines if the facets will be hidden when no results are found. | |
| initFacets | ❌ | ✅ | Defines a specific facet to apply when searching. | initFacets: {"Category": ["Documents"]} | |
| initSearchBoxText | ✅ | ✅ | “” (empty string) | Defines the text which is shown in the search input onblur if empty. | initSearchBoxText: "Search..." |
| jumpToTopOnFacetClick | ✅ | ✅ | true | Defines if the result list will scroll to the top, when clicking on a facet/filter. | |
| language | ✅ | ✅ | “da” (Danish) | Defines the search language. The language must be listed as the ISO code for the language in question. | language: 'en' |
| loading | ❌ | ✅ | Defines a text/html snippet that will be shown while searching is in progress. | loading: "<img src='http://mydomain/images/loading.gif'; alt="loading"/>" | |
| resetFiltersBeforeSearch | ❌ | ❌ | false | Defines if filters are reset when entering a new search. | |
| searchInputs | ✅ | ✅ | Defines the HTML IDs for one or more search inputs to trigger a search. | searchInputs: ["cludo-search-form", "cludo-search-form-top","cludo-search-form-mobile"] | |
| translateSearchTemplates | ✅ | ✅ | Define custom translations of labels. Requires both the ISO code for the language and the label to update. | CludoSearch.translateProvider. translations["en"]["total_results"] = "Wow, we found <b>{{value}}</b> matches!" | |
| googleAnalyticsTrackingId | ✅ | ✅ | Defines a specific Google Analytics property tracking ID to use for tracking search events. If no matching tag is found or this Cludo JS option is not specifically set, the script will default to using the first available GA tag. | googleAnalyticsTrackingId:"UA-99999999-9" |