feat(selectize): add support for multiple selection

Closes angular-ui#295, closes angular-ui#1787

Author: gustavohenke

docs/examples/demo-selectize-with-bootstrap.html

@@ -16,8 +16,8 @@
     .input-group > .selectize-control > .selectize-input {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
-    }    
-  </style>  
+    }
+  </style>
   <p>Selected: {{ctrl.person.selected.name}}</p>
 
   <form class="form-horizontal">
@@ -77,6 +77,21 @@
         </div>
       </div>
 
+      <div class="form-group">
+        <label class="col-sm-3 control-label">Multiple</label>
+        <div class="col-sm-6">
+
+          <ui-select ng-model="ctrl.person.selected" multiple theme="selectize" title="Choose a person">
+            <ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}</ui-select-match>
+            <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
+              <div ng-bind-html="item.name | highlight: $select.search"></div>
+              <small ng-bind-html="item.email | highlight: $select.search"></small>
+            </ui-select-choices>
+          </ui-select>
+
+        </div>
+      </div>
+
       <div class="form-group">
         <label class="col-sm-3 control-label">Disabled</label>
         <div class="col-sm-6">

src/common.css

@@ -92,10 +92,15 @@ body > .select2-container.open {
 }
 
 /* Fix input width for Selectize theme */
-.selectize-control > .selectize-input > input {
+.selectize-control.single > .selectize-input > input {
   width: 100%;
 }
 
+/* Fix line break when there's at least one item selected with the Selectize theme */
+.selectize-control.multi > .selectize-input > input {
+  margin: 0 !important;
+}
+
 /* Fix dropdown width for Selectize theme */
 .selectize-control > .selectize-dropdown {
   width: 100%;

src/selectize/choices.tpl.html

@@ -1,4 +1,5 @@
-<div ng-show="$select.open" class="ui-select-choices ui-select-dropdown selectize-dropdown single">
+<div ng-show="$select.open" class="ui-select-choices ui-select-dropdown selectize-dropdown"
+     ng-class="{'single': !$select.multiple, 'multi': $select.multiple}">
   <div class="ui-select-choices-content selectize-dropdown-content">
     <div class="ui-select-choices-group optgroup" role="listbox">
       <div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header" ng-bind="$group.name"></div>

src/selectize/match-multiple.tpl.html

@@ -0,0 +1,11 @@
+<div class="ui-select-match" data-value
+     ng-repeat="$item in $select.selected track by $index"
+     ng-click="$selectMultiple.activeMatchIndex = $index;"
+     ng-class="{'active':$selectMultiple.activeMatchIndex === $index}"
+     ui-select-sort="$select.selected">
+  <span class="ui-select-match-item"
+        ng-class="{'select-locked':$select.isLocked(this, $index)}">
+    <span uis-transclude-append></span>
+    <span class="remove ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&times;</span>
+  </span>
+</div>

src/selectize/select-multiple.tpl.html

@@ -0,0 +1,18 @@
+<div class="ui-select-container selectize-control multi plugin-remove_button" ng-class="{'open': $select.open}">
+  <div class="selectize-input"
+       ng-class="{'focus': $select.open, 'disabled': $select.disabled, 'selectize-focus' : $select.focus}"
+       ng-click="$select.open && !$select.searchEnabled ? $select.toggle($event) : $select.activate()">
+    <div class="ui-select-match"></div>
+    <input type="search" autocomplete="off" tabindex="-1"
+           class="ui-select-search"
+           ng-class="{'ui-select-search-hidden':!$select.searchEnabled}"
+           placeholder="{{$selectMultiple.getPlaceholder()}}"
+           ng-model="$select.search"
+           ng-disabled="$select.disabled"
+           aria-expanded="{{$select.open}}"
+           aria-label="{{ $select.baseTitle }}"
+           ondrop="return false;">
+  </div>
+  <div class="ui-select-choices"></div>
+  <div class="ui-select-no-choice"></div>
+</div>