Using Selectize

Simple Selectize input

by kplcode

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.0/superhero/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/js/standalone/selectize.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.css">
<div class="container">
  <div class="row centered-form">
    <div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Contact list demo</h3>
        </div>
        <div class="panel-body">
          <form role="form" id="contacts">

            <div class="form-group">
              <select id="select-name" placeholder="Select a person..." name="person-select" multiple>
                <option value="">Type a name...</option>
                <option value="4">Thomas Edison</option>
                <option value="17">John Doe</option>
                <option value="19">John Donut</option>
                <option value="21">Dante Joe</option>
                <option value="22">Jo Dod</option>

                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
              </select>
            </div>

            <input type="submit" value="Submit" class="btn btn-info btn-block">

          </form>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

body {
      background: url("http://subtlepatterns.com/patterns/stardust.png");
    }
    
    .centered-form .panel {
      background: rgba(255, 255, 255, 0.8);
      box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px;
      color: #4e5d6c;
    }
    
    .centered-form {
      margin-top: 60px;
    }

JavaScript

$(function() {
  $('#select-name').selectize({
    plugins: ['remove_button'],
    onDelete: function(values) {
			item_remove_function($(this));
    }
  });

  $('#contacts').submit(function(e) {
    e.preventDefault();

    alert('You have chosen the following users: ' + JSON.stringify($('#select-name').val()));
  });
});

function item_remove_function($this)
{
  var name = $this[0].$wrapper.siblings('select').attr('name');
  alert('select name = ' + name);
}