Html Question posted in
Some basic documentation can be found here.

How to create a ComboBox in HTML?

Short Version

How can i make a ComboBox in HTML?

Long Version

How can I create an editable drop-down with default text in HTML?

Which is to say:

  • a text box the user can type in
  • or they can click (or Alt+Down) to display a drop-down
  • and select some pre-defined text
  • while the text box defaults to some useful default that does not (necessarily) appear in the list

Something like the standard Windows Combo Box control, or the WinForms ComboBox:

enter image description here

Research Effort

I’ve tried the following 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>

but no drop-down appears:

enter image description here

If the user deletes the existing text, then the drop-down will appear:

enter image description here

Thus defeating the entire purpose of a drop-down.

How can i make a ComboBox in HTML?

jsFiddle

Tags:

3

Answers


  1. 0

    You need JavaScript to delete OR focus and select and they can start typing which will open the dropdown for what they type assuming the letter they type appears in the datalist

    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>

    Alternatively search for widgets

    Login or Signup to reply.
  2. 0

    For the Focus and Select you can also use CSS.

     .select-editable {
     position:relative;
     background-color:white;
     border:solid grey 1px;
     width:120px;
     height:18px;
 }
 .select-editable select {
     position:absolute;
     top:0px;
     left:0px;
     font-size:14px;
     border:none;
     width:120px;
     margin:0;
 }
 .select-editable input {
     position:absolute;
     top:0px;
     left:0px;
     width:100px;
     padding:1px;
     font-size:12px;
     border:none;
 }
 .select-editable select:focus, .select-editable input:focus {
     outline:none;
 }
    <div class="select-editable">
    <select onchange="this.nextElementSibling.value=this.value">
        <option value="Good morning Vietnam">Good morning Vietnam</option>
        <option value="Stay classy San Francisco">Stay classy San Francisco</option>
        <option value="Hello, world!">Hello, world!</option>
    </select>
    <input type="text" name="format" value="default text" />
</div>
    Login or Signup to reply.
  3. 0

    A datalist will only show the options that are filtered by the input.

    So if you use a placeholder on the <input> it will ensure all the options are shown when clicking the input and filter them while typing.

    <input type="text" list="cars" placeholder="Choose..." />
<datalist id="cars">
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
</datalist>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search