Maps SDK for Web
tt.plugins.SearchBox
This plugin provides a search box functionality to your map. As the user starts typing, search results appear in the suggestions list below the input field. This functionality is enabled by the typahead functionality of Fuzzy Search.
User’s keystrokes result in requests to Fuzzy Search. A number of calls made to the service can be optimized thanks to the options: idleTimePress and minNumberOfCharacters. For example, with default settings, typing in the word "amst" (4 characters) will result in two separate API requests, if there is a delay of at least 200 ms after typing the third and fourth characters.
For more details on how to use the configuration options, please refer to the documentation below.
Constructor
tt.plugins.SearchBox(services, [options])
Example
{
idleTimePress: 200,
minNumberOfCharacters: 3,
searchOptions: {
language: 'en-GB'
},
units: 'metric',
filter: function(result[, resultIndex[, results]]) {
return true;
},
noResultsMessage: 'No results found.'
}
Parameters
| Name | Description |
|---|---|
|
services
Services default:None |
The services object, which you need to import beforehand. |
|
options
Object default:None |
The Options object. |
|
options.placeholder
String default:None |
Specifies text that appears within the search box when it's empty. |
|
options.idleTimePress
Number default:200 |
The Search service call delay (in ms) after the last typed character. |
|
options.minNumberOfCharacters
Number default:3 |
The minimum number of characters to trigger the search call. |
|
options.units
String default:'metric' |
Either 'metric' or 'imperial'. Search results will show the distance from the center of the map; this sets which units should be used. |
|
options.searchOptions
Object default:None |
All custom options for the Search service. Option "typeahead" is set to true by default. For all available options please refer to Search API - Fuzzy Search |
|
options.filter
Function default:None |
Only results that pass the test implemented in this method will be shown on the results list. |
|
options.noResultsMessage
String default:'No results found.' |
The message shown when a given query search service returned no results or they were filtered out. |
|
options.showSearchIcon
Boolean default:true |
If set to false, search icon in the input will be hidden. |
|
options.cssStyleCheck
Boolean default:true |
If true, the plugin will check if required css styles are added. |
Methods
getOptions( ): Object
Returns the options object.
Returns
this.options
getSearchBoxHTML( ): HTMLElement
Returns the plugin container.
Returns
container
onAdd(map): HTMLElement
Binds map with plugin instance.
Parameters
| Name | Description |
|---|---|
|
map
Maps.Map default:None |
Returns
container
onRemove( ): Void
Removes plugin from the map.
Returns
query( ): Void
Triggers search and fills the results list
Returns
updateOptions(options): Void
Events
All the class events are keys of the Events static member.
To learn more about how to listen events please refer to the Evented class.