Bootstrap Integration

HTML

<div class="row">
  <div class="col-md-4">
    <div class="mb-3">
      <label for="grid-select1" class="form-label">Select 1</label>
      <select id="grid-select1" class="form-select">
        <option value="">Select...</option>
        <option value="frontend">🎨 Frontend</option>
        <option value="backend">⚙️ Backend</option>
        <option value="mobile">📱 Mobile</option>
        <option value="devops">🚀 DevOps</option>
      </select>
    </div>
  </div>
  <div class="col-md-4">
    <div class="mb-3">
      <label for="grid-select2" class="form-label">Select 2</label>
      <select id="grid-select2" class="form-select">
        <option value="">Select...</option>
        <option value="junior">Junior</option>
        <option value="pleno">Mid-level</option>
        <option value="senior">Senior</option>
        <option value="lead">Lead</option>
      </select>
    </div>
  </div>
  <div class="col-md-4">
    <div class="mb-3">
      <label for="grid-select3" class="form-label">Select 3</label>
      <select id="grid-select3" class="form-select">
        <option value="">Select...</option>
        <option value="remoto">🏠 Remote</option>
        <option value="presencial">🏬 On-site</option>
        <option value="hibrido">🔄 Hybrid</option>
      </select>
    </div>
  </div>
</div>

JavaScript

new VanillaSmartSelect('#grid-select1', {
  placeholder: 'Select an area...'
});

new VanillaSmartSelect('#grid-select2', {
  placeholder: 'Select a level...'
});

new VanillaSmartSelect('#grid-select3', {
  placeholder: 'Select a model...'
});

HTML

<div class="card">
  <div class="card-header">
    ⚙️ Configurations
  </div>
  <div class="card-body">
    <div class="mb-3">
      <label for="category-select" class="form-label">Category</label>
      <select id="category-select" class="form-select">
        <option value="">Select...</option>
        <option value="tech">💻 Technology</option>
        <option value="food">🍔 Food</option>
        <option value="sports">⚽ Sports</option>
        <option value="music">🎵 Music</option>
        <option value="travel">✈️ Travel</option>
      </select>
    </div>
    <div class="mb-3">
      <label for="priority-select" class="form-label">Priority</label>
      <select id="priority-select" class="form-select">
        <option value="">Select...</option>
        <option value="high">🔴 High</option>
        <option value="medium">🟡 Medium</option>
        <option value="low">🟢 Low</option>
      </select>
    </div>
  </div>
</div>

JavaScript

new VanillaSmartSelect('#category-select', {
  placeholder: 'Select a category...'
});

new VanillaSmartSelect('#priority-select', {
  placeholder: 'Select priority...'
});

HTML

<!-- Button to open modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#settingsModal">
  Open Settings
</button>

<!-- Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="settingsModalLabel">Configurations</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="modal-theme" class="form-label">Theme</label>
          <select id="modal-theme" class="form-select">
            <option value="">Select...</option>
            <option value="light">☀️ Light</option>
            <option value="dark">🌙 Dark</option>
            <option value="auto">🔄 Auto</option>
          </select>
        </div>
        <div class="mb-3">
          <label for="modal-language" class="form-label">Language</label>
          <select id="modal-language" class="form-select">
            <option value="">Select...</option>
            <option value="pt">🇧🇷 Português</option>
            <option value="en">🇺🇸 English</option>
            <option value="es">🇪🇸 Español</option>
            <option value="fr">🇫🇷 Français</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

JavaScript

// Initialize BEFORE the modal opens (show.bs.modal)
const settingsModal = document.getElementById('settingsModal');
let themeSelect, languageSelect;

settingsModal.addEventListener('show.bs.modal', () => {
  if (!themeSelect) {
    themeSelect = new VanillaSmartSelect('#modal-theme', {
      placeholder: 'Select theme...'
    });
  }

  if (!languageSelect) {
    languageSelect = new VanillaSmartSelect('#modal-language', {
      placeholder: 'Select language...',
      searchable: true
    });
  }
});

HTML

<div class="mb-3">
  <label for="fruits" class="form-label">Select a fruit:</label>
  <select id="fruits" class="form-select">
    <option value="">Select a fruit...</option>
    <option value="maca">🍎 Apple</option>
    <option value="banana">🍌 Banana</option>
    <option value="laranja">🍊 Orange</option>
    <option value="uva">🍇 Grape</option>
    <option value="manga">🥭 Mango</option>
  </select>
</div>

JavaScript

const select = new VanillaSmartSelect('#fruits', {
  searchable: true,
  placeholder: 'Select a fruit...'
});

HTML

<div class="mb-3">
  <label for="languages" class="form-label">Select languages:</label>
  <select id="languages" class="form-select" multiple>
    <option value="js" selected>JavaScript</option>
    <option value="ts">TypeScript</option>
    <option value="py">Python</option>
    <option value="java">Java</option>
  </select>
</div>

JavaScript

const multiSelect = new VanillaSmartSelect('#languages', {
  searchable: true,
  multiple: true
});

HTML

<div class="mb-3">
  <label for="countries" class="form-label">Select a country:</label>
  <select id="countries" class="form-select">
    <option value="">Select...</option>
    <optgroup label="South America">
      <option value="br">🇧🇷 Brazil</option>
      <option value="ar">🇦🇷 Argentina</option>
    </optgroup>
    <optgroup label="Europe">
      <option value="pt">🇵🇹 Portugal</option>
      <option value="es">🇪🇸 Spain</option>
    </optgroup>
  </select>
</div>

JavaScript

const countriesSelect = new VanillaSmartSelect('#countries', {
  searchable: true
});

HTML

<form id="bootstrap-form" class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="department" class="form-label">Department: *</label>
    <select id="department" class="form-select" required>
      <option value="">Select...</option>
      <option value="ti">💻 TI</option>
      <option value="rh">👥 RH</option>
    </select>
    <div class="invalid-feedback">
      Please select a department.
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

JavaScript

// Initialize selects
new VanillaSmartSelect('#department');
new VanillaSmartSelect('#role');

// Bootstrap Validation
const form = document.getElementById('bootstrap-form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  if (form.checkValidity()) {
    // Valid form
    form.classList.add('was-validated');
    console.log('Form submitted!');
  } else {
    // Show errors
    form.classList.add('was-validated');
  }
});

HTML

<div class="mb-3">
  <label for="colors" class="form-label">Select a color:</label>
  <select id="colors" class="form-select">
    <option value="">Select...</option>
    <option value="vermelho">🔴 Red</option>
    <option value="azul">🔵 Blue</option>
  </select>
</div>

<button id="clear-btn" class="btn btn-outline-secondary">
  Clear Selection
</button>

JavaScript

const colorSelect = new VanillaSmartSelect('#colors', {
  searchable: true,
  allowClear: true
});

// Clear programmatically
document.getElementById('clear-btn').addEventListener('click', () => {
  colorSelect.clear();
});