Select 2 implemention

select2_implementaion.js

// 1. First inject the CSS
const select2CSS = document.createElement('link');
select2CSS.rel = 'stylesheet';
select2CSS.href = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css';
document.head.appendChild(select2CSS);

// 2. Create our enhanced custom styles
const customStyles = document.createElement('style');
customStyles.textContent = `
/* General Select2 Container */
.select2-container--default {
  width: 100% !important;
  margin-bottom: 1rem;
}

/* Main Multi-Select Container */
.select2-container--default .select2-selection--multiple {
  min-height: 38px;
  padding: 4px 8px;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  background-color: #fff;
  max-height: 38px;
  overflow-y: auto;
  transition: all 0.2s ease;
}

/* Expand Container on Focus */
.select2-container--default.select2-container--focus .select2-selection--multiple {
  max-height: 150px;
  overflow-y: auto;
}

/* Selected Items Container */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Individual Selected Tags - Optimized */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  display: inline-flex;
  align-items: center;
  background-color: #f0f7ff;
  border: 1px solid #cfe2ff;
  border-radius: 16px;
  color: #084298;
  padding: 0 8px 0 12px;
  font-size: 0.8125rem;
  height: 26px;
  line-height: 1.5;
  margin: 2px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Remove Button - Optimized for Visibility */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #3d8bfd !important;
  margin-left: 6px;
  font-size: 1.1em;
  opacity: 0.8;
  transition: all 0.15s ease;
  border-left: 1px solid rgba(13, 110, 253, 0.2);
  padding-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #dc3545 !important;
  opacity: 1;
  transform: scale(1.1);
}

/* Focus State */
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Dropdown Menu */
.select2-dropdown {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  background-color: #fff;
  max-height: 300px;
  overflow-y: auto;
}

/* Dropdown Options */
.select2-results__option {
  padding: 8px 12px;
  font-size: 0.875rem;
  color: #212529;
  transition: all 0.15s ease;
}

.select2-results__option:hover {
  background-color: #f8f9fa;
}

.select2-results__option--highlighted {
  background-color: #0d6efd !important;
  color: white !important;
}

/* Search Input in Dropdown */
.select2-search--dropdown .select2-search__field {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 6px 12px;
  font-size: 0.875rem;
}

/* Match original form control spacing */
#jobgroups + .select2-container {
  margin-bottom: 0;
}
`;
document.head.appendChild(customStyles);

// 3. Load Select2 JS
const select2JS = document.createElement('script');
select2JS.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js';
select2JS.onload = function() {
  // 4. Initialize Select2 after library loads
  const initScript = document.createElement('script');
  initScript.textContent = `
    (function() {
      function waitForJQuery() {
        if (window.jQuery) {
          if ($.fn.multiselect && $('#jobgroups').data('multiselect')) {
            $('#jobgroups').multiselect('destroy');
          }
          
          $('#jobgroups').select2({
            width: '100%',
            placeholder: 'Select job categories',
            allowClear: true,
            closeOnSelect: false,
            dropdownParent: $('#jobgroups').closest('.ls-inputicon-box')
          });
          
          $('#jobgroups').css({
            'visibility': 'hidden',
            'position': 'absolute',
            'height': 0,
            'width': 0
          });
          
          $(document).on('select2:select', '#jobgroups', function() {
            const select2 = $(this).data('select2');
            if (select2) {
              select2.$dropdown.addClass('select2-dropdown--below');
              select2.$dropdown.show();
            }
          });
        } else {
          setTimeout(waitForJQuery, 100);
        }
      }
      waitForJQuery();
    })();
  `;
  document.body.appendChild(initScript);
};
document.head.appendChild(select2JS);