vueadvancedmit

Vue Autocomplete

A searchable autocomplete input.

6.5k3.1k525585

About this module

A Vue autocomplete with debounced filtering, keyboard navigation and ARIA combobox semantics.

#vue#autocomplete#search#combobox

Source code

Installation

  1. 1

    Install Vue

    Create a Vue 3 project or add the component to an existing one.

    npm create vue@latest
  2. 2

    Create the component

    Create VueAutocomplete.vue and paste the source below.

  3. 3

    Import and use

    Import the component in your page or parent component and render it.

Usage

  1. 1

    Import the component

    Import VueAutocomplete in a parent component.

    import VueAutocomplete from "./components/VueAutocomplete.vue";
  2. 2

    Register and render

    Register it in your setup and render it in the template.

    <script setup>
    import VueAutocomplete from "./components/VueAutocomplete.vue";
    </script>
    
    <template>
      <vue-autocomplete />
    </template>
Overview
Categorycomponents
Frameworkvue
Difficultyadvanced
Licensemit
Versionv1.0.0
Features
  • Single-file component
  • TypeScript-friendly
  • Accessible by default
Traits
  • ResponsiveYes
  • Dark modeYes
  • AccessibleYes
  • Production readyYes
Props
itemsstring[]

Values to search.

Default: []

placeholderstring

Input placeholder.

Default: ""

modelValuestring

Selected value.

Default: ""

Browser support
  • Chrome 90+
  • Firefox 90+
  • Safari 15+
  • Edge 90+

Related modules

Command Palette

Search modules and jump anywhere