SDK: Query Field

nanorep.sdk.QueryField

This class allows to create or update input field with ability to show nanorep suggestions and use voice input.

Example usage

1. Add script to your page:

<script src="https://<AccountName>.nanorep.co/web/include.js?sdk=query-field"></script>

2. Create empty <div> or prepare existing text input field <input type="text">:

<div id="example-container"></div>

3. Initialize QueryField component:

// initialize SDK with common parameters
nanorep.sdk.init({
  host: 'product_demo.nanorep.co',
  account: 'product_demo',
  kb: 'docs'
});

// initialize query field component
var queryField = new nanorep.sdk.QueryField({
  autocompleteEnabled: true
}, document.getElementById('example-container')).on({
  search: function(query) {
    alert('User wants to search: ' + query);
  },
  selectSuggestion: function(suggestionText) {
    alert('User selected suggestion: ' + suggestionText);
  }
});

Options

initialText

Type: String

Default: ''

Provide string which will be shown as input placeholder

new nanorep.sdk.QueryField({
  initialText: 'Hi there! Lets search something'
}, document.getElementById('example-options-initialText'));

<div id="example-options-initialText"></div>

voiceEnabled

Type: Boolean

Default: false

Show voice input button if supported by user browser

new nanorep.sdk.QueryField({
  voiceEnabled: true
}, document.getElementById('example-options-voiceEnabled'));

<div id="example-options-voiceEnabled"></div>

autocompleteEnabled

Type: Boolean

Default: false

Show suggestions dropdown

new nanorep.sdk.QueryField({
  initialText: 'Type "demo"',
  autocompleteEnabled: true
}, document.getElementById('example-options-autocompleteEnabled'));

<div id="example-options-autocompleteEnabled"></div>

Methods

focus

focus() : void

Set focus inside the QueryField input

var queryFieldMethodsFocus = new nanorep.sdk.QueryField({}, document.getElementById('example-methods-focus'));
queryFieldMethodsFocus.focus();

<div id="example-methods-focus"></div>

reset

reset() : void

Reset value inside the QueryField input

var queryFieldMethodsReset = new nanorep.sdk.QueryField({}, document.getElementById('example-methods-reset'));

<div id="example-methods-reset"></div>
<button onclick="queryFieldMethodsReset.reset()">reset query field</button>

setLanguage

setLanguage(langName) : void

Specify language code for query field which will be used for voice recognition and display layout

Parameters

langName: String Specific language code for query field (default language code is 'en')

var queryFieldMethodsSetLanguage = new nanorep.sdk.QueryField({
  initialText: 'Sprechen Sie Deutsch?',
  voiceEnabled: true
}, document.getElementById('example-methods-setLanguage'));
queryFieldMethodsSetLanguage.setLanguage('de');

<div id="example-methods-setLanguage"></div>

setValue

setValue(value) : void

Set value of query field

Parameters

value: String String to fill query field

var queryFieldMethodsSetValue = new nanorep.sdk.QueryField({}, document.getElementById('example-methods-setValue'));

<div id="example-methods-setValue"></div>
<button onclick="queryFieldMethodsSetValue.setValue('demo')">Set 'demo' as value</button>

getValue

getValue(langName) : String

Method allows to get query field value

var queryFieldMethodsGetValue = new nanorep.sdk.QueryField({}, document.getElementById('example-methods-getValue'));
queryFieldMethodsGetValue.setValue('demo');

<div id="example-methods-getValue"></div>
<button onclick="alert(queryFieldMethodsGetValue.getValue())">Get query-field value</button>

Events

reset

queryFieldInstance.on('reset', function() {})

Occurred when field was reset by clicking on the reset button

new nanorep.sdk.QueryField({}, document.getElementById('example-events-reset')).on('reset', function() {
  alert('Field was cleared');
});

<div id="example-events-reset"></div>

search

queryFieldInstance.on('search', function() {})

Occurred after ENTER key was pressed

Arguments

query: String Query string from field

new nanorep.sdk.QueryField({}, document.getElementById('example-events-search')).on('search', function(query) {
  alert('You search "' + query + '"');
});

<div id="example-events-search"></div>

noSuggestions

queryFieldInstance.on('noSuggestions', function() {})

Occurred when no suggestions available for current query

new nanorep.sdk.QueryField({
  initialText: 'Type some weird stuff',
  autocompleteEnabled: true
}, document.getElementById('example-events-noSuggestions')).on('noSuggestions', function() {
  alert('There aren\'t any suggestions for your query');
});

<div id="example-events-noSuggestions"></div>

newSuggestions

queryFieldInstance.on('newSuggestions', function() {})

Occurred when query field receive some suggestions for current query

Arguments

suggestions: Array Array of new suggestions from the search

new nanorep.sdk.QueryField({
  initialText: 'Type "demo"',
  autocompleteEnabled: true
}, document.getElementById('example-events-newSuggestions')).on('newSuggestions', function(suggestions) {
  alert('You have '+ suggestions.length +' suggestions');
});

<div id="example-events-newSuggestions"></div>

selectSuggestion

queryFieldInstance.on('selectSuggestion', function() {})

Occurred when user selects suggestion from dropdown either by using keyboard or mouse

Arguments

suggestionText: String Selected suggestion text

new nanorep.sdk.QueryField({
  initialText: 'Type "demo" and select any suggestion',
  autocompleteEnabled: true
}, document.getElementById('example-events-selectSuggestion')).on('selectSuggestion', function(text) {
  alert('You have selected "' + text + '"');
});

<div id="example-events-selectSuggestion"></div>