Chosen with icons

chosen_icons.js

(function ($) {
  // Alter chosen markup for dropdowns with icons.
  $('.dropdown--hasIcons .dropdown__select').on('chosen:showing_dropdown', function (event, data) {
    // Since items are not initially created in DOM we will alter the markup on dropdown show.
    var resultsData = data.chosen.results_data,
      $dropdownItems = data.chosen.dropdown.find('li');

    resultsData.forEach(function (result, i) {
      $dropdownItems.eq(i).prepend('<i class="dropdown__icon dropdown__icon-' + result.value + '"></i>')
    });
  }).on('chosen:ready', function (event, data) {
    // We also need to prepend a icon for selected
    // item which is available on chosen ready.
    var $chosenSelectedItem = data.chosen.selected_item,
      resultsData = data.chosen.results_data;

    $chosenSelectedItem.prepend('<i class="dropdown__icon dropdown__icon-' + resultsData[0].value + '"></i>');
  }).on('chosen:hiding_dropdown', function (event, data) {
    // Update selected item icon after we select an option(which leads to dropdown hide event).
    var $chosenSelectedItem = data.chosen.selected_item,
      selectedLanguage = $(event.target).find(':selected').val(),
      resultsData = data.chosen.results_data,
      selectedLanguageIndex = data.chosen.current_selectedIndex;

      $chosenSelectedItem
        .find('.dropdown__icon')
        .removeClass('dropdown__icon-' + resultsData[selectedLanguageIndex].value)
        .addClass('dropdown__icon-' + selectedLanguage);
  });

  // Chosen initialization.
  $('.js-chosen').chosen({
    "disable_search": true,
    "inherit_select_classes": true,
    "width": "100%"
  });
})(jQuery);