Select2 demo

by koh_edwin

HTML

<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<link rel="stylesheet" href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css">
<form action="#">

  First name: <input type="text" name="FirstName" value="Mickey"><br>
  Last name: <input type="text" name="LastName" value="Mouse"><br>
  <select id="example" multiple="multiple" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
  </select>
  <select class="chosenCommon" name="fruits">
    <option value="1">Banana</option>
    <option value="2">Orange</option>
    <option value="3">Mango</option>

  </select>

  Full name: <input type="text" name="FullName" id="FullName" value="Mickey Mouse"><br>

  <input type="text" name="" id="address">

  <select class="chosenCommon" name="cities">
    <option value="1">Dhaka</option>
    <option value="2">Chittagon</option>
    <option value="3">Rajshahi</option>
    <option value="3">Khulna</option>
  </select>

  <input type="submit" value="Save" id="save_btn">
</form>

CSS

.select2-container--default .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;cursor: pointer
}

.select2-container--open .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 5px 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;cursor: pointer
}

JavaScript

$('#example').select2({
  placeholder: 'Select a month'
});

/*$(document).on('keyup', '.select2-search__field', function(e) {
  if (e.which === 13) {
    e.preventDefault();
    $('#example').select2("close");
    var inputs = $(this).closest('form').find(':input:visible');
    inputs.eq(inputs.index(this) + 1).focus();
  }
});
*/
$('body').on('keydown', 'input, select', function(e) {
  if (e.shiftKey) {
    if (e.key === "Enter") {
      var self = $(this),
        form = self.parents('form:eq(0)'),
        focusable, next;
      focusable = form.find('input,a,select,button,textarea').filter(':visible');
      next = focusable.eq(focusable.index(this) - 1);
      if (next.length) {
        next.focus();
      } else {
        form.submit();
      }
      return false;
    }
  }
  if (e.key === "Enter") {
    var self = $(this),
      form = self.parents('form:eq(0)'),
      focusable, next;
    focusable = form.find('input,a,select,button,textarea').filter(':visible');
    next = focusable.eq(focusable.index(this) + 1);
    if (next.length) {
      next.focus();
    } else {
      form.submit();
    }
    return false;
  }
});