View on GitHub

<multi-value-suggestbox>

A Polymer custom element that allows selection of multiple suggestions

Download this project as a .zip file Download this project as a tar.gz file

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>