Creating A Combo Box in Raw HTML

Overview & Setup

This article will show how to create an input in HTML that accepts text to search through a list as well as a dropdown of options like a select input. For my example we will create the combo box in Vue, but it can easily be adapted to any other framework or used in raw HTML. To start you will need to create a new Vue environment in Stackblitz . In the App.vue file right below the <img> tag displaying the Vue Logo, is where we will create the Combo Box.

Getting Into It

Creating this input is actually quite simple. We will do it using only raw HTML elements. First, within the <template> create an input tag with the appropriate attributes like this:

<!-- App.js -->

<input
  id="combobox"
  v-model="comboboxValue"
  type="text"
  list="input-list"
  @input="emitValue(comboboxValue)"
  placeholder="Combo Box"
/>

This creates a text input. For now on the page, it will look and behave just as a normal input element. But you should see that we gave it a list attribute and an input event handler.

Next we will create the HTML to finish the add the dropdown section of the combo box. This is done by adding the following HTML directly below the input tag that we previously created.

<!-- App.js -->

<datalist id="input-list">
  <option v-for="option in options" :key="option">
    {{ option }}
  </option>
</datalist>

Notice this relies on having an array named 'options', so lets add that array into a data function within the <script> below where the components are declared:

//App.js

data() {
  return {
    options: ['one', 'two', 'three'],
    comboboxValue: '',
  };
},

This code also declares comboboxValue which is where we will store the selected value from the input. Lastly we need to create the method to handle the @input event. Paste the following code below the data function:

//App.js

methods: {
  emitValue(val) {
    console.log({ val });
  },
},

Now when you look at the window, you should see what still appears to be a normal input below the Vue logo. But now as you type in it, it will filter the list that we gave it and show the applicable options below the input like a select input. Then when you click an option it will put the text of that option into the text input box. You can also see in the console that the contents of teh input are being tracked.

Conclusion

That is it! Now you have a combo box that you can have contain any array that you wish it to by simply changing the options array. You can handle the change of the input however you would like within the emitValue method. The initial value of the input can also be set by simply giving comboboxValue an initial value

Hopefully this into has helped you! To see my Stackblitz example, click here.