Limit Selected Options in Multiselect

https://harvesthq.github.io/chosen/#limit-selected-options-in-multiselect

HTML

<link rel="stylesheet" href="https://harvesthq.github.io/chosen/chosen.css">
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select multiple class="chosen-select">
  <option>American Black Bear</option>
  <option>Asiatic Black Bear</option>
  <option>Brown Bear</option>
  <option>Giant Panda</option>
  <option>Sloth Bear</option>
  <option>Sun Bear</option>
  <option>Polar Bear</option>
  <option>Spectacled Bear</option>
</select>

CSS

.chosen-select {
  width: 350px;
}

JavaScript

var $chosen = $('.chosen-select').chosen({
  max_selected_options: 2
});

$chosen.change(function () {
  var $this = $(this);
  var chosen = $this.data('chosen');
  var search = chosen.search_container.find('input[type="text"]');
  
  search.prop('disabled', $this.val() !== null);
  
  if (chosen.active_field) {
    search.focus();
  }
});