The Custom Element
This is a simple example, where the same set of suggestions are supplied in response to each input-changed
event. In your apps, you can analyze the newInput
field of input-changed
events to provide matching suggestions.
Quick Start
Declare a dependency in your bower.json
:
{
...
"dependencies": {
"multi-value-suggestbox": "~0.1.4"
}
}
Install:
$ bower install
Import dependencies from your HTML:
<html>
<head>
...
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/multi-value-suggestbox/dist/multi-value-suggestbox.html">
</head>
<body>
...
</body>
</html>
Place the custom element in your HTML and listen for input-changed
events:
<html>
<head>
...
</head>
<body>
<multi-value-suggestbox id="multi_suggest"
options='{
"allow_space": true,
"allow_nonmatching": true
}'>
</multi-value-suggestbox>
<script>
addEventListener('polymer-ready', function() {
document.querySelector('#multi_suggest').setFocus();
});
addEventListener('input-changed', function(e) {
var el = document.querySelector('#multi_suggest');
el.suggestions = ["Alice", "Ali", "Bob", "Fitzpatrick", "Juan", "Kaya", "Thomas", "Zed"];
});
</script>
</body>
</html>