Select2 4.0 - Dependent Dropdown and Search

by Kushal Jayswal

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.js"></script>
<div id="countryId">
  <div class="form-group__text select">
    <select name="countryId" class="select2">
      <option value="" label="select-one" />
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option value="FL">Florida</option>
      <option value="GA">Georgia</option>
      <option value="HI">Hawaii</option>
      <option value="ID">Idaho</option>
      <option value="IL">Illinois</option>
      <option value="IN">Indiana</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Louisiana</option>
      <option value="ME">Maine</option>
      <option value="MD">Maryland</option>
      <option value="MA">Massachusetts</option>
      <option value="MI">Michigan</option>
      <option value="MN">Minnesota</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="MT">Montana</option>
      <option value="NE">Nebraska</option>
      <option value="NV">Nevada</option>
      <option value="NH">New Hampshire</option>
      <option value="NJ">New Jersey</option>
      <option value="NM">New Mexico</option>
      <option value="NY">New York</option>
      <option value="NC" selected="">North Carolina</option>
      <option value="ND">North Dakota</option>
      <option value="OH">Ohio</option>
      <option value="OK">Oklahoma</option>
      <option value="OR">Oregon</option>
      <option value="PA">Pennsylvania</option>
...

JavaScript

$(document).ready(function() {
  var $countryNode = $('#countryId select'),
    $countryNodeCustom = $countryNode.next(),
    $stateNode = $('#stateId select'),
    $stateNodeCustom = $stateNode.next(),
    $cityNode = $('#cityId select'),
    $cityNodeCustom = $cityNode.next(),
    $languageNode = $('#languageId select'),
    $languageNodeCustom = $languageNode.next(),
    selectedCountry = null,
    selectedState = null,
    searchedCityTerm = null;

  init();

  // Functionality
  function init() {
    $('.select2').select2({
      placeholder: ''
    });
    $cityNode.select2({
      placeholder: '',
      minimumInputLength: 3
    });
    $languageNode.select2({
      placeholder: '',
      minimumResultsForSearch: -1
    });
    $cityNode.data('select2').$dropdown.addClass("citySearchContainer");
  }

  $stateNode.parents('.form-group').addClass('disabled');
  $cityNode.parents('.form-group').addClass('disabled');

  $countryNode.on('change', function() {
    $stateNode.html('');
    $stateNode.prepend($('<option></option>'));
    $stateNode.val('');
    $cityNode.html('');
    $cityNode.val('');
    selectedCountry = getSelectValue('countryId');
    getStates(selectedCountry);
  });

  function getStates(countryId) {
    Liferay.Service(
      '/portlet.state/get-states-by-country-id', {
        countryId: countryId
      },
      function(states) {
        var exception = states.exception;

        if (exception || !states || states.length == 0) {
          //no-states

        } else {
          populateState(states);
        }
      }
    );
  }

  function populateState(states) {
    var selectObject = $.map(states, function(states) {
      return states;
    });
    $.each(selectObject, function(key, val) {
      $stateNode.append($('<option value="' + this.id + '">' + this.name + '</option>'));
      $stateNode.parents('.form-group').removeClass('disabled');
    });
  }

  $stateNode.on('change', function() {
   ...