How to make a html search datalist for Vue

What do I mean by search suggestions

An example where I have use a datalist is on the search page. Another axample of this in action would look like this:

See the Pen HTML Search with datalists by Brett
(@brettanda) on CodePen.

Adding the datalist to an input

To add a datalist to a text input you will need to add list="id" to your text input. For this, to work the list attribute needs to be set to the id of the datalist element.

<input type="search" placeholder="Search" list="data" />

Creating the datalist element

The datalist element is like the select element.

<datalist id="data">
    <option value="HTML" />
    <option value="CSS" />
    <option value="JavaScript" />
</datalist>

Implementing Vue

let us say you have a search form component using the above datalist and search input.

<form>
    <input type="search" placeholder="Search" list="data" />

    <datalist id="data">
        <option value="HTML" />
        <option value="CSS" />
        <option value="JavaScript" />
    </datalist>
</form>

Let's say that you have an array of search values that you would like to display in this datalist, for example, this array:

export default {
    data() {
        return {
            list: ["HTML", "CSS", "JavaScript"]
        };
    }
};

<form>
    <input type="search" placeholder="Search" list="data" />

    <datalist id="data">
        <option v-for="item in list" :key="item" :value="item" />
    </datalist>
</form>

Adding Gridsome

So you are using Gridsome (like me). Let's say that you would like your posts titles to show in this data list, You will need a page-query and use that instead of the data array.

<page-query>
query Search {
  allPost {
    edges {
      node {
        title
      }
    }
  }
}
</page-query>

Now for the new datalist.

<form>
    <input type="search" placeholder="Search" list="data" />

    <datalist id="data">
        <option v-for="{ item } in $page.allPost.edges" :key="node.title" :value="node.title" />
    </datalist>
</form>