Developers

Search Box

Overview

This component will be a form with the query parameter.

You can link the search box to the results component. This will update the results component when the search box form is submitted.

Usage

How to create this component:

var searchBox = sdk.component('searchBox', target:String, options:Object);

Sample

By default, this component looks like this:

Target

This is the HTML component. For example, the "#inbenta" target is:

<div id="inbenta"></div>

Options

Available options to set in this component

Name Type Default Description Example
autofocus Boolean false Determines whether to automatically focus on the input when rendered. var searchBox = sdk.component('searchBox', '#search-box', {autofocus: true});
title String '' Allows to add a message of your choice above the search box. var searchBox = sdk.component('searchBox', '#search-box', {title: 'Enter your question'});

Default options object

{
  autofocus: false,
  title: ''
}

Methods

This component does not have any methods.

Subcomponent

This component does not have any subcomponents.

Events

Events to listen on this component.

Name Description
query Sent whether the query has changed

Tracking

This component does not track any event.

Labels

Labels of this component. The default labels of each component can be rewritten in the SDK creation configuration.

Name Default Description
SEARCH_BOX_BUTTON Send HTML for send query
SEARCH_BOX_PLACEHOLDER Question Text for search box placeholder

Examples

Create Searchbox with a typeahead autocomplete linked to it.

var searchBox = sdk.component('searchBox', '#searchbox', {});
var autocompleter = sdk.component('autocompleter', '#autocompleter', {});
autocompleter.linkToSearchBox(searchBox);