Select (JS) Componentes

O que é

É o campo de escolher numa lista ("Estado", "Categoria", "Serviços desejados"), só que melhor que o do navegador: tem busca para listas grandes, a opção escolhida aparece marcada com ✓, e quando a pessoa pode escolher várias, cada escolha vira uma etiqueta que se tira no ×. Você escreve um <select> comum, com as <option> de sempre, e coloca ele dentro de <div sw-select>. O <select> de verdade continua lá, escondido: o formulário envia o valor normalmente.

Precisa do CSS e do JavaScript do SWCore. Ao carregar a página, o SWCore lê as opções do seu <select> e monta a lista nova por cima. Com uma escolha, a busca é o próprio campo: é só clicar e digitar. Com várias (multiple), a busca fica no topo da lista aberta. Cada escolha atualiza o <select> escondido e dispara o evento change normal, então o código que você já tinha continua funcionando.

Quando usar

• Lista grande (estados, cidades, países, produtos): com busca, que já vem ligada.
• Várias escolhas ("Quais serviços você quer?"): <select multiple> vira etiquetas.
• Lista curta (Prioridade: baixa, média, alta): sem busca — sw-select-search="false".
• Painel admin: escolher categorias e marcas de um produto.
• Para 2 a 4 opções que cabem lado a lado, o Segmentado é mais rápido de usar. Para uma lista simples sem JavaScript, use <select sw-inp> do Campo de formulário.

Comece aqui

1. 1

   Coloque o SWCore na página: o CSS no <head> e o JavaScript antes de fechar o </body>.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <!-- … sua página … -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Coloque o seu <select> dentro de <div sw-select>. O texto de "nada escolhido" vai em sw-select-ph. Clique e digite para buscar.

   Selecione…PernambucoParaíbaBahiaCearáSão Paulo

   <div sw-select>
     <select name="uf" sw-select-ph="Selecione o estado">
       <option value="">Selecione…</option>
       <option value="pe">Pernambuco</option>
       <option value="pb">Paraíba</option>
       <option value="ba">Bahia</option>
       <option value="ce">Ceará</option>
       <option value="sp">São Paulo</option>
     </select>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<form sw-frm action="/orcamento" method="post">
  <div sw-frm-row>
    <div sw-fld>
      <label>Seu estado</label>
      <div sw-select>
        <select name="uf" sw-select-ph="Selecione">
          <option>Alagoas</option><option>Bahia</option><option>Ceará</option>
          <option>Paraíba</option><option>Pernambuco</option><option>Rio Grande do Norte</option>
        </select>
      </div>
    </div>
    <div sw-fld>
      <label>Prazo</label>
      <div sw-select>
        <select name="prazo" sw-select-ph="Selecione" sw-select-search="false">
          <option>Sem pressa</option><option>Até 30 dias</option><option>Urgente</option>
        </select>
      </div>
    </div>
  </div>
  <div sw-fld>
    <label>O que você precisa?</label>
    <div sw-select>
      <select name="servicos[]" multiple sw-select-ph="Escolha um ou mais">
        <option>Site</option><option>Loja virtual</option>
        <option>Sistema</option><option>Identidade visual</option>
      </select>
    </div>
  </div>
  <div sw-frm-act><button sw-btn="pri" type="submit">Pedir orçamento</button></div>
</form>

<div sw-select id="plano">
  <select name="plano" sw-select-ph="Escolha o plano" sw-select-search="false">
    <option value="49,90">Básico</option>
    <option value="99,90">Profissional</option>
    <option value="199,90">Empresa</option>
  </select>
</div>
<p id="preco">Escolha um plano para ver o preço.</p>

<script>
  document.getElementById('plano').addEventListener('sw:select:change', (e) => {
    // e.detail.value = lista com o(s) valor(es) · e.detail.label = texto da 1ª escolha
    document.getElementById('preco').textContent =
      e.detail.label + ': R$ ' + e.detail.value[0] + '/mês';
  });
</script>

<div sw-select id="uf">
  <select name="uf" sw-select-ph="Estado">
    <option value="pe">Pernambuco</option>
    <option value="ba">Bahia</option>
    <option value="sp">São Paulo</option>
  </select>
</div>

<script>
  SW.Select.set('#uf', 'ba');                        // escolhe Bahia
  const atual = SW.Select.get('#uf');                // 'ba'
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js.

Cuidados — erros comuns

• sw-select vai na <div> de fora; sw-select-ph e sw-select-search vão no <select> de dentro.
• O <label for="…"> apontando para o select não abre a lista (o select de verdade está escondido). Use um <label> simples em cima, sem for.
• No múltiplo, o nome do campo precisa terminar em [] (name="servicos[]") para o PHP receber todas as escolhas, e não só a última.
• Se você trocar as <option> depois que a página carregou, a lista bonita não se atualiza sozinha: crie o <div sw-select> de novo (um bloco novo inserido na página é montado automaticamente).
• Em e.detail.value vem sempre uma lista. Para uma escolha só, pegue e.detail.value[0].

O que ele não faz

• Não navega pela lista com as setas do teclado; a escolha é por clique ou toque (a busca ajuda a chegar rápido).
• Não tem tamanhos nem estilos (soft, fill…) como o sw-inp: é um visual só.
• Não busca opções no servidor enquanto digita: a busca filtra só as opções que já estão no HTML.