API Programática

Controle completo do Vanilla Smart Select via JavaScript. Manipule seleções, adicione/remova opções dinamicamente, controle o estado do dropdown e muito mais.

Single Select - API Básica

Clique nos botões para testar...

<select id="fruits">
  <option value="">Selecione uma fruta...</option>
  <option value="apple">Maçã</option>
  <option value="banana">Banana</option>
  <option value="orange">Laranja</option>
  <option value="grape">Uva</option>
</select>

// Criar instância
const fruitsAPI = new VanillaSmartSelect('#fruits', {
  searchable: true
});

// Selecionar por valor
fruitsAPI.val('banana');

// Selecionar por ID
fruitsAPI.select('apple');

// Limpar seleção
fruitsAPI.clear();

// Obter valor atual
const value = fruitsAPI.val();

// Obter item completo selecionado
const selected = fruitsAPI.getSelected();

Multi-Select - Adicionar/Remover

Clique nos botões para testar...

<select id="languages" multiple>
  <option value="js">JavaScript</option>
  <option value="py">Python</option>
  <option value="java">Java</option>
  <option value="cpp">C++</option>
  <option value="rust">Rust</option>
</select>

// Multi-select
const languagesAPI = new VanillaSmartSelect('#languages', {
  multiple: true,
  searchable: true
});

// Adicionar à seleção
languagesAPI.select('js');

// Remover da seleção
languagesAPI.unselect('js');

// Obter todos os selecionados
const selected = languagesAPI.getSelected(); // Array

Opções Dinâmicas

Clique nos botões para testar...

<select id="dynamic">
  <option value="">Selecione...</option>
  <option value="opt1">Opção 1</option>
  <option value="opt2">Opção 2</option>
</select>

// Adicionar opção
dynamicAPI.addOption({
  id: 'new1',
  text: 'Nova Opção'
});

// Remover opção
dynamicAPI.removeOption('opt2');

// Obter todos os dados
const data = dynamicAPI.data();

// Definir novos dados
dynamicAPI.data([
  { id: '1', text: 'Item 1' },
  { id: '2', text: 'Item 2' }
]);

Controle de Estado

<select id="state">
  <option value="">Selecione...</option>
  <option value="1">Item 1</option>
  <option value="2">Item 2</option>
  <option value="3">Item 3</option>
</select>

// Controlar dropdown
stateAPI.open();
stateAPI.close();
stateAPI.toggle();

// Controlar foco
stateAPI.focus();

// Habilitar/Desabilitar
stateAPI.enable();
stateAPI.disable();

// Verificar estado
const isOpen = stateAPI.isOpen();

Resumo Completo da API