)` |
| template | String | n/a | [Handlebars](https://handlebarsjs.com/) template for this segment |
### Ai answers result
Area to display generated AI Answers.
To allow fetching AI Answers, you need to set "hasAiAnswers" to true in the searchui instance's configuration.
```js
searchui.aiAnswersResult({
containerId: 'searchresults',
mainHeadlineText: 'AI-generated answer',
answerMaxHeight: 150,
sourcesHeadlineText: 'Based on the following sources:',
hasHideToggle: false
});
```
Settings that can be passed to the `aiAnswersResult` function:
| Key | Possible values | Default value | Description |
| ---------------------------- |-------------|-------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|
| containerId | String | n/a | ID of the HTML element that will act as a container for search results |
| mainHeadlineText | String | "Answer" | Main headline text |
| answerMaxHeight | Integer | 150 | Max height (in pixel) of the answer area |
| sourcesHeadlineText | String | "Sources"| Headline text of "Sources"_ |
| hasHideToggle | Boolean | true | Display toggle to show/hide generated answers |
| precompiledTemplate | Handlebars precompiled template function | [Default template](https://github.com/AddSearch/search-ui/blob/master/src/components/aianswersresult/precompile-templates/aianswersresult.handlebars) | Override the default template with a custom [Handlebars precompiled](https://handlebarsjs.com/installation/precompilation.html) template |
Data structure used in aiAnswersResult component
```
{
mainHeadlineText: 'Answer',
subHeadlineText: 'subHeadlineText',
answerText: 'Answer text',
sourcesHeadlineText: 'Sources:',
sources: [],
aiExplanationText: 'Generated by AI, may contain errors.',
isResultLoading: false,
hadError: false,
sentimentState: 'positive' | 'negative',
showHideToggle: true,
isHidden: false
}
```
## Support Content Security Policy
The Content Security Policy (CSP) is a protection standard that helps secure websites and
applications against various attacks, including data injection, click-jacking, and cross-site
scripting attacks. [See documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
It is recommended to remove unsafe-eval directive in your CSP header for better protection.
So far, Search UI Library is compiling dynamic template with
[Handlebars](https://handlebarsjs.com/), the compilation process invokes the method eval().
Therefore, we now provide ability to pre-compile your templates.
[See handlebarsjs precompiling](https://handlebarsjs.com/installation/precompilation.html). Default
templates are all precompiled for now, you can also precompile your own templates and feed them to
the `precompiledTemplate` setting which is available for each Search UI Components.
[How to use precompiled templates](#using-handlebars-pre-compiled-templates)
## General functions
### Execute search
Execute a search query with a specific keyword. Common use cases include links of most popular
keywords: Clicking the keyword executes the search.
```js
searchui.search(keyword);
```
### Clear search
Clear the keyword and enabled filters.
```js
searchui.clear();
```
### Hide autocomplete
Hide the autocomplete component. For example, a "close" button inside the autocomplete modal would
call this function.
```js
searchui.hideAutocomplete();
```
### Register a custom Handlebars helper
Handlebars Helpers can be used to implement functionality that is not part of the Handlebars
language itself. Read more at
[handlebarsjs.js](https://handlebarsjs.com/guide/expressions.html#helpers).
```js
// This function can be called in a Handlebars template: {{toUpperCase "foo"}}
searchui.registerHandlebarsHelper('toUpperCase', function (param) {
return param.toUpperCase();
});
```
### Register a custom Handlebars partial
Handlebars allows for template reuse through partials. Partials are normal Handlebars templates that
may be called directly by other templates. Read more at
[handlebarsjs.js](https://handlebarsjs.com/guide/partials.html#basic-partials).
```js
// This function can be called in a Handlebars template: {{toUpperCase "foo"}}
var partialTemplate = `Print this line in main template.`;
searchui.registerHandlebarsPartial('myPartial', partialTemplate);
```
```js
// Calling the partial in main template
{{> myPartial}}
```
### Using Handlebars pre-compiled templates
Each Search UI Library's component provided a setting to pass your own pre-compiled template.
To get started, install Handlebars npm package, which contains the precompiler:
```js
npm install -g handlebars
```
Create a file name `example.handlebars` containing your template:
```js
My example {{ contextVariable }}
```
Run the precompiler on your template file:
```js
handlebars searchfield.handlebars -f searchfield.precompiled.js
```
Or precompile the whole directory
```js
handlebars your-dir/all-templates/> output-dir/all-precompiled-templates-srp.js -c handlebars/runtime
```
`-c` flag creates a `require` statement for Handlebars-runtime in your precompiled template file.
Please note that -c will build your templates into a CommonJS module, which is not supported in the
browser.
Use the precompiled template inside a component, for example:
```js
// Handlebars are exported within Search UI Library's module as Handlebars_runtime
// You can also install handlebars runtime package and import it
// Below code will use your precompiled template of the file name "searchfield.handlebars"
var Handlebars = AddSearchUI.Handlebars_runtime;
var precompiledTemplates = Handlebars.templates;
searchui.searchField({
containerId: 'searchfield-container',
precompiledTemplate: precompiledTemplates['searchfield'],
autofocus: true,
placeholder: 'Keyword..',
button: 'Search',
searchAsYouType: false
});
```
Read more at
[handlebarsjs precompiling templates](https://handlebarsjs.com/installation/precompilation.html)
See our [example](https://demo.addsearch.com/search-ui-examples/precompiledtemplates/).
Notes:
- Handlebars are exposed globally, so you can access it with `Handlebars` variable.
- All your pre-compiled templates can be accessed with `Handlebars.templates` after loading the
template js function on your site.
- Custom helpers are registered with `Handlebars.registerHelper(helperName, helperFunction)`
- Custom partials are registered with
`Handlebars.registerPartial(partialName, precompiledTemplates);` (Partials are pre-compiled the
same way as templates)
## Analytics
This library sends analytics events to AddSearch Analytics Dashboard when:
- Search results are returned
- No results were found
- A result was clicked
You can add integration for third party analytics software by passing a custom _analyticsCallback_
function in AddSearchClient constructor's
[configuration object](#search-ui-instance-and-configuration). This function is called with a single
parameter containing one of the following JSON objects:
#### Search results received:
```js
{
action: 'search',
keyword: 'keyword',
numberOfResults: 10, // If 0, no results were found
processingTimeMs: 21 // Time it took to process the query and return search results (in milliseconds)
}
```
In search-as-you-type implementations the _search_ event is sent after 2,5 second delay in typing or
if a result is clicked within this debounce time.
#### Search result clicked:
```js
{
action: 'click',
keyword: 'keyword',
documentId: '...', // Hit's 32-char identifier
position: 1 // Position of the clicked result. The first result being 1
}
```
To save clicks reliably before the user's browser leaves the page, it's recommended to use the
[navigator.sendBeacon](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon)
method.
## Supported web browsers
This library is tested on
- Chrome
- Firefox
- Edge
- Safari 6.1+
- Internet Explorer 11
## Development
To modify this library, clone the repository and follow these steps:
#### Install dependencies
```sh
npm install
```
#### Code
Re-compile when source files change while developing
```sh
npm run watch
```
#### Run tests
Run automated tests
```sh
npm test
```
Run automatically when tests change
```sh
npm run test -- --watch
```
#### Build for production
Build a production bundle. The file is saved under the _dist/_ folder
```sh
npm run build
```
## Support
Feel free to send any questions, ideas, and suggestions at
[support@addsearch.com](mailto:support@addsearch.com) or visit
[addsearch.com](https://www.addsearch.com/) for more information.