This is an example of a multi-token autocomplete. Start typing and see if the server returns any items that match your token. You can select a suggested item by either pressing the TAB key, the ENTER key, or by typing the key for a token separator (i.e. either comma or semicolon).
Please enter tokens:Statement | Return value |
autocomplete.getModel()
|
|
autocomplete.getNonMatches()
|
|
Code used to create the input:
var uri = new goog.Uri('fake');
var autocomplete = new plana.ui.ac.AutoComplete(uri, true, new plana.ui.ac.BootstrapRenderer());
var loadingImg = goog.dom.createDom('img', { 'src': 'images/ajax-loader.gif' });
autocomplete.setLoadingContent(loadingImg);
var container = document.getElementById('multiToken');
autocomplete.render(container);
This is an example of a single-token autocomplete. Start typing and see if the server returns any items that match your token. You can select a suggested item by either pressing the TAB key, the ENTER key.
Please enter tokens:Statement | Return value |
autocomplete.getModel()
|
|
autocomplete.getNonMatches()
|
|
Code used to create the input:
var uri = new goog.Uri('fake');
var autocomplete = new plana.ui.ac.AutoComplete(uri, false, new plana.ui.ac.BootstrapRenderer());
var loadingImg = goog.dom.createDom('img', { 'src': 'images/ajax-loader.gif' });
autocomplete.setLoadingContent(loadingImg);
var container = document.getElementById('singleToken');
autocomplete.render(container);
Options:
The table below contains static properties of the autocomplete component. More settings can be configured via the constructor and setter methods. Please see the jsdoc for details.
Option | Description | Default |
plana.ui.ac.RemoteObjectMatcher.TOKEN_PARA
|
The name of the token parameter passed to the server |
'token'
|
plana.ui.ac.RemoteObjectMatcher.USE_SIMILAR_PARA
|
The parameter name of the flag that specifies whether the server should return matches that are similar to the search token |
'user_similar'
|
plana.ui.ac.RemoteObjectMatcher.MULTI_TOKEN_PARA
|
The parameter name of the flag that specifies whether the autocomplete |
'multi'
|
plana.ui.ac.RemoteObjectMatcher.MAX_MATCHES_PARA
|
The name of the parameter that specifies how many matches the server should return |
'max_matches'
|
plana.ui.ac.RemoteObjectMatcher.FULL_STRING_PARA
|
The name of the parameter that contains the entire input value (useful for multi-token inputs) |
'fullstring'
|
plana.ui.ac.RemoteObjectMatcher.CAPTION_PROPERTY
|
The property name of objects that contain the caption to display in the list of suggestions |
'caption'
|
plana.ui.ac.AutoComplete.PLACEHOLDER_ROW_CSS
|
The class name of the row showing loading and no match found messages |
'ac-fetching-row'
|
Notes:
This examples contains two objects with a 'caption' property:
{id: 1, caption: 'hello'}, {id: 2, caption: 'world'}
and the following string array:
['coding', 'on', 'keep', 'calm', 'and', 'carry']
that can be searched.
We simulate a request taking 200ms to complete.