Início / coding / Perguntas / 78310806
Accepted
Ian Boyd
Asked: 2024-04-11 21:45:55 +0800 CST

Como criar um ComboBox em HTML?

  • 772

Versão curta

Como posso fazer um ComboBox em HTML?

Versão longa

Como posso criar um menu suspenso editável com texto padrão em HTML?

O que quer dizer:

  • uma caixa de texto que o usuário pode digitar
  • ou eles podem clicar em (ou Alt+ Down) para exibir um menu suspenso
  • e selecione algum texto predefinido
  • enquanto o padrão da caixa de texto é algum padrão útil que não aparece (necessariamente) na lista

Algo como o controle padrão do Windows Combo Box ou o WinForms ComboBox :

insira a descrição da imagem aqui

Esforço de Pesquisa

Eu tentei o seguinte HTML:

<input id="edPhrase" list="phrases" value="Hello, world!">
<datalist id="phrases">
  <option value="Good morning Vietnam">Good morning Vietnam</option>
  <option value="Stay classy San Francisco">Stay classy San Francisco</option>
  <option value="Cleaveland Rocks">Cleaveland Rocks</option>
  <option value="I see dead people">I see dead people</option>
  <option value="Guess who's drunk">Guess who's drunk</option>
</datalist>

mas nenhum menu suspenso aparece:

insira a descrição da imagem aqui

Se o usuário excluir o texto existente, o menu suspenso aparecerá:

insira a descrição da imagem aqui

Derrotando assim todo o propósito de um menu suspenso.

O que nos leva à pergunta:

Como posso fazer um ComboBox em HTML?

Exemplo Mínimo Reprodutível Completo (CRME)

Então você pode tentar mexer nele para que funcione em sua sandbox:

html

2 respostas

  1. Best Answer

    Não existe uma maneira nativa de HTML de conseguir isso, você precisará de algum Javascript personalizado para mostrar <datalist>todas as opções ou implementar o preenchimento automático em um<select>

    Usar um placeholderno <input>garantirá que todas as opções sejam mostradas dentro do <datalist>, isso manterá o filtro enquanto digita funções, mas você não poderá 'selecionar' o espaço reservado.

    <input type="text" list="cars" placeholder="Choose..." />
<datalist id="cars">
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
</datalist>

    Existem alguns truques para datalistmostrar sempre todas as entradas disponíveis usando (por exemplo) blur()eventos se placeholdernão forem suficientes:

    • 2

  2. Você precisa de JavaScript para excluir OR foco e selecionar e eles podem começar a digitar, o que abrirá o menu suspenso para o que eles digitam, assumindo que a letra digitada apareça na lista de dados

    document.getElementById('edPhrase').addEventListener('click', (e) => {
  const input = e.target;
  input.value = "";
});
/* Perhaps not
document.getElementById('edPhrase').addEventListener('blur', (e) => {
  const input = e.target;
  if (input.value.trim() === "") input.value=input.defaultValue;
});
*/
document.getElementById('edPhrase').addEventListener('change', (e) => {
  const input = e.target;
  if (input.value.trim() !== "") input.defaultValue=input.value;
});
    <input id="edPhrase" list="phrases" value="Hello, world!">
<datalist id="phrases">
  <option value="Good morning Vietnam">Good morning Vietnam</option>
  <option value="Stay classy San Francisco">Stay classy San Francisco</option>
  <option value="Cleaveland Rocks">Cleaveland Rocks</option>
  <option value="I see dead people">I see dead people</option>
  <option value="Guess who's drunk">Guess who's drunk</option>
</datalist>

    document.getElementById('edPhrase').addEventListener('click', (e) => {
  const input = e.target;
  input.focus();
  input.select();
})
    <input id="edPhrase" list="phrases" value="Hello, world!">
<datalist id="phrases">
  <option value="Good morning Vietnam">Good morning Vietnam</option>
  <option value="Stay classy San Francisco">Stay classy San Francisco</option>
  <option value="Cleaveland Rocks">Cleaveland Rocks</option>
  <option value="I see dead people">I see dead people</option>
  <option value="Guess who's drunk">Guess who's drunk</option>
</datalist>

    Como alternativa, pesquise widgets

    • 0

relate perguntas