Building a custom typeahead control

Create a ClientApp/components/shared/Typeahead.vue file and then start off the template section with the following:

<template>  <form-input-base :label="label">    <div class="typeahead">      ...    </div>  </form-input-base></template>

As we did with our other input components, we're going to inherit from the base form component, so we'll start by rendering it here and placing our subcomponent content within it. Next, we need a standard HTML input where the user will begin typing their value:

<input  ref="input"  :value="value"  :name="name"  :class="classes"  @blur="blur"  @focus="focus"  @keydown.enter.prevent="enter"  @keydown.down.prevent="down"  @keydown.up.prevent="up"  @input="input" />

Again, as we did with the form ...

Get ASP.NET Core 2 and Vue.js now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.