select2-wrapper.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">

<script src="../../bower_components/select2/dist/js/select2.full.min.js"></script>
<link rel="stylesheet" href="../../bower_components/select2/dist/css/select2.min.css">
<!--
Polymer 1.0 wrapper for Select2
Example:
    <select2-wrapper id="my_select2_element"></select2-wrapper>
    <script>
      document.getElementById('my_select2_element').model = [
        {
          label: 'Asia',
          value: 'AS'
        }
      ];
    </script>
@group Wrappers
@element select2-wrapper
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="select2-wrapper">

  <style>
    :host {
      display: block;
      box-sizing: border-box;
    }
  </style>

  <template>
    <!--<select data-tags="true" data-placeholder="Select an option" id="{{eId}}" multiple="{{multiple}}" style="width: 100%">
      <template is="dom-repeat" items="{{model}}">
        <option value="{{item.value}}">{{item.label}}</option> 
      </template>
    </select>-->
    <input id="{{eId}}" style="width:100%;">
  </template>

</dom-module>

<script>
  Polymer({
    is: 'select2-wrapper',
   
    _onUpdateSelectItems: function (data) {      
      if (data){
          $("#" + this.eId).select2({            
            tags: this.model,
            maximumSelectionSize: this.maxSelected,
            placeholder: "Select...",
            createSearchChoice: this.searchCreate
          });          
   
      }
    },
   
    properties: {
      /**
       * This property sets the select2 items
       * @type Array
       */
      model: {
        type: Array,
        value: null,
        observer: '_onUpdateSelectItems'
      },
      /**
       * This property sets the id for the select element, needed for several selects
       * @type String
       */
      elementId: {
        type: String,
        value: "select2-wrapper-tag"
      },
      /**
       * This property lets the select be multiple or not
       * @type Boolean
       */
      multiple: {
        type: Boolean,
        value: false        
      },
      maxSelected: {
        type: Number,
        value: 1
      },
      canCreate: {
        type: Boolean,
        value: false        
      }
    },   

    attached: function() {     
      $("#" + this.eId).select2({        
        tags: this.model,
        maximumSelectionSize: this.maxSelected,
        placeholder: "Select...",
        createSearchChoice: this.searchCreate
      });
    },  

    ready: function(){
      this.eId = this.elementId + Date.now();
      if(!this.canCreate){
        this.searchCreate = function(term){        
          return false;
        }
      }      
    },  
    
    deselectAll: function(){
      $("#" + this.elementId).each(function () {
        $(this).select2('val', '')
      });
    },

    getSelectedValues: function(){
      return $("#" + this.eId).val();
    },

    setValues: function(newVal){
      var newValArray = newVal.split(",");
      $("#" + this.eId).val(null).trigger("change");
      $("#" + this.eId).val(newValArray).trigger("change");      
    },

    clear: function(){
      $("#" + this.eId).val(null).trigger("change");
    },

    setModel: function(value){
      this.model = value;
      $("#" + this.eId).trigger("change");
    }
  });
</script>