How to customize search using CludoJS options
When implementing search on a website, the CludoJS can be used to enable/disable and customize certain features. The options are defined as an object with multiple options. The table below describes each of the options available, what they do, and examples of values.
All options are available for custom templates, however, some options 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"]} | |
| 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" |