Search Box

Overview

This component provides a text input with a submit button, so the user can launch searches with new queries. This component can also have different properties and methods and you can attach an autocompleter component to it to enhance its performance.

This component must be linked to a search Store, since it launches a new search when clicked on the "Submit" button.

Usage

This is how you create this component:

sdk.component('search-box', target: HTMLElement|String, options: Object);

Sample

By default, this component looks like this:

Options

The following options can be set in this component:

Name Type Default Description
autofocus1 Boolean false Use this to focus the cursor on the input field automatically when the page loads
autocompleter Object | Boolean {} Use this option to create and attach an autocompleter component. Set the value to false to disable the autocompleter. To see available options, go to here.

1 Note that if you use autofocus, the page may send the /auth loading request depending on the SDK implementation. This may impact your rate limits.

Methods

The following methods can be used in this component:

Name Description
getInputElement() : HTMLInputElement Get the input element
setAutocompleter(component: AutocompleterComponent/SemanticAutocompleterComponent) Set the given autocompleter instance as the default autocompleter

Tracking

This component does a new search when submitting the query, using the endpoint POST /federated-searches. This search is bound to the current session and the tracking option set to true.

Labels

Name Default Description
SEARCH_BOX_PLACEHOLDER Your question here The text for the placeholder

Examples

Example using the results component Store through the linkTo method:
<div id="target"></div>

<script>
  var searchBox = sdk.component('search-box', '#target', {
    autofocus: true,
    autocompleter: false
  });

  var results = sdk.component('results', document.createElement('div'));
  results.linkTo(searchBox);
</script>
Example adding a custom autocompleter component:
<div id="target"></div>

<script>
  var searchBox = sdk.component('search-box', '#target', {
    autofocus: true
  });

  var results = sdk.component('results', document.createElement('div'));
  results.linkTo(searchBox);

  var autocompleter = sdk.component('autocompleter', document.createElement('div'))
  searchBox.setAutocompleter(autocompleter)
</script>
Example adding a custom semantic autocompleter:
<div id="target"></div>

<script>
  var searchBox = sdk.component('search-box', '#target', {
    autofocus: true
  });

  var results = sdk.component('results', document.createElement('div'));
  results.linkTo(searchBox);

  var autocompleter = sdk.component('semantic-autocompleter', document.createElement('div'))
  searchBox.setAutocompleter(autocompleter)
</script>