Have you ever stumbled upon those form fields that suggest options in a drop-down as you type, like when you’re entering a street address? It turns out, that making those are not as difficult as you would think! Today, I’m gonna walk you through three cool ways to pull it off using Vue.js. Let’s dive in!
Vuetify
If you are a Vue developer, you have likely used Vuetify at some point. It is an open-source UI library that offers Vue Components for all sorts of things. One of those things just happens to be Autocompletes.
Last week, I spoke about creating a repository of data for coding examples. The first one is a list of counties in the state of Wisconsin. In this example, the values from the API are stored in a counties array, the value that you entered into the input is stored in a selectedCounty variable, and the fetchCounties method fetches the values from the API. Thanks to the v-autocomplete component, it is super easy using Vuetify.
Shoelace
Shoelace (now known as Web Awesome) doesn’t have a built-in autocomplete element but there is a stretch goal on their kickstarter to add one. That means that we need to build the functionality ourselves.
Our Shoelace version has a filteredCounties variable so that we can control what is shown in the suggestions and a selectCounty method to let the user click on one of the suggestions.
Plain HTML and CSS
We have already established that Shoelace doesn’t have an autocomplete but neither does Bulma or Bootstrap. So, I figured that we would try a pure HTML and CSS autocomplete.
This is very similar to our Shoelace example but with some extra CSS on the input. You might be wondering about that autocomplete attribute on the input. It is a different type of autocomplete. The autocomplete attribute specifies if browsers should try to predict the value of an input field or not. You still need to roll your own for the suggestions.
We briefly played with web components once before on here but it has been a few years and I wanted to go a little deeper. Web components are a suite of different technologies that allow developers to create custom, reusable, encapsulated HTML tags for use in web pages and web apps. Essentially, they let you create your own HTML elements with their own functionality, independent of the rest of your codebase.
Let’s start by taking a look at a very basic example.
In this example, the MyGreeting class extends HTMLElement to create a custom element. The constructor then creates a shadow DOM for encapsulation and adds a <span>element with a greeting message (which uses the name attribute for customization). The customElements.define method then registers the custom element with the browser, associating it with the tag <my-greeting>.
So, what can we do with this? You might have heard of Shoelace / Web Awesome. That is just a collection of cool web components. Let’s take a look at a quick example.
As you can see above, you just include the activates Shoelace’s autoloader and then registers components on the fly as you use them. Let’s look at a slightly more complicated example.
If you flip open the JavaScript panel, you will see that it still neeeds event listeners for the open and close buttons but it is not as complex as if you were writing this frome scratch.