Vanilla Smart Select
Transforme elementos <select> em dropdowns poderosos com busca em tempo real, AJAX, templates customizados e total acessibilidade. Tudo em JavaScript puro, sem dependências.
Quick Start
Transforme um elemento select comum em um dropdown poderoso com apenas 3 linhas de código:
<!-- 1. Inclua os arquivos CSS e JS -->
<link rel="stylesheet" href="vanilla-smart-select.min.css">
<script src="vanilla-smart-select.min.js"></script>
<!-- 2. Crie um elemento select -->
<select id="my-select">
<option value="1">Opção 1</option>
<option value="2">Opção 2</option>
<option value="3">Opção 3</option>
</select>// 3. Inicialize o plugin
const select = new VanillaSmartSelect('#my-select', {
placeholder: 'Selecione uma opção...',
searchable: true
});Recursos Principais
Busca em Tempo Real
Filtragem instantânea com suporte a diacríticos. Encontre "Açaí" buscando "acai".
Templates Customizados
Crie resultados ricos com HTML: avatares, ícones, badges, imagens e muito mais.
AJAX & Dados Remotos
Carregue opções de APIs externas com debouncing, cache e paginação infinita.
Totalmente Acessível
WCAG 2.1 Level AA com suporte completo a ARIA e navegação por teclado.
Tags Dinâmicas
Permita que usuários criem novas opções dinamicamente enquanto digitam.
Multi-Seleção
Seleção múltipla com limite máximo e visualização em chips/tags.
Internacionalização
Suporte nativo para múltiplos idiomas: EN, PT-BR, ES e customizável.
Alto Desempenho
Otimizado para grandes listas com virtual scrolling e renderização eficiente.
Zero Dependências
JavaScript puro moderno. Sem jQuery, sem frameworks. Apenas ~15KB gzipped.
Mobile First
Design responsivo otimizado para touch com suporte a todos os dispositivos.
API Completa
Controle programático total: get/set valores, adicionar/remover opções e mais.
Bootstrap 5 Ready
Integração perfeita com Bootstrap 5 sem conflitos de CSS.
Instalação
NPM
npm install vanilla-smart-selectCDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanilla-smart-select@1.0.1/dist/vanilla-smart-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/vanilla-smart-select@1.0.1/dist/vanilla-smart-select.min.js"></script>ES Modules
import VanillaSmartSelect from 'vanilla-smart-select';
import 'vanilla-smart-select/dist/vanilla-smart-select.min.css';Compatibilidade de Navegadores
| Navegador | Versão | Status |
|---|---|---|
| Chrome / Edge | Últimas 2 versões | ✓ Suportado |
| Firefox | Últimas 2 versões | ✓ Suportado |
| Safari | Últimas 2 versões | ✓ Suportado |
| Opera | Últimas 2 versões | ✓ Suportado |
| Internet Explorer | Todas | ✗ Não suportado |