Advance Select

Phoenix uses Choices.js for advance select. Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency

Documentation for Choices

Multiple Select Example

<label for="organizerMultiple">Multiple</label><select class="form-select" id="organizerMultiple" data-choices="data-choices" multiple="multiple" data-options='{"removeItemButton":true,"placeholder":true}'>
  <option value="">Select organizer...</option>
  <option>Massachusetts Institute of Technology</option>
  <option>University of Chicago</option>
  <option>GSAS Open Labs At Harvard</option>
  <option>California Institute of Technology</option>
</select>

Single Select Example

<label for="organizerSingle">Single</label><select class="form-select" id="organizerSingle" data-choices="data-choices" single="single" data-options='{"removeItemButton":true,"placeholder":true}'>
  <option value="">Select organizer...</option>
  <option>Massachusetts Institute of Technology</option>
  <option>University of Chicago</option>
  <option>GSAS Open Labs At Harvard</option>
  <option>California Institute of Technology</option>
</select>

Stylesheet

<pre><code class="language-html">&lt;link href=&quot;vendors/choices/choices.min.css&quot; rel=&quot;stylesheet&quot; /&gt;</code></pre>
<link href="vendors/choices/choices.min.css" rel="stylesheet" />

Javascript

<pre><code class="language-html">&lt;script src=&quot;vendors/choices/choices.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<script src="vendors/choices/choices.min.js"></script>