Vue autocomplete component

Overview

🎯 install

$ yarn add vue-autocomplete-component
# npm install vue-autocomplete-component --save

πŸš€ Usage

">
<template>
  <Autocomplete
    :options="[
      { value: 'david', label: 'David' },
      { value: 'clement', label: 'Clement' },
      { value: 'leo', label: 'Leo' },
    ]"
    :searchApi="
      'https://5e0deade36b80000143db93c.mockapi.io/get-options?search'
    "
    :defaultValue="3"
    :items="3"
    :onSearchComplete="onSearchComplete"
    :onSearchError="onSearchError"
    :onSelect="onSelect"
    :onOpen="onOpen"
    :onClose="onClose"
    :transformResult="transformResult"
  />
template>

<script>
import { Autocomplete } from "vue-autocomplete-component";

export default {
  components: {
    Autocomplete,
  },
  methods: {
    onSearchComplete: function() {
      console.log("onSearchComplete");
    },
    transformResult: function(values) {
      console.log("transformResult with values is: ", values);
    },
    onSearchError: function(err) {
      console.log("onSearchError with error is: ", err);
    },
    onSelect: function(value) {
      console.log("onSelect with value is: ", value);
    },
    onOpen: function() {
      console.log("onOpen");
    },
    onClose: function() {
      console.log("onClose");
    },
  },
};
script>

Props

Prop name Prop type Description
options Array The options to display in the dropdown menu, default is array object with required keys are "value" and "label"
searchApi String Api url to search when input typing
defaultValue String, Number initital value for dropdown
onSearchComplete Func handle when search api completed
onSearchError Func handle when search api error
onSelect Func handle when a item selected
onOpen Func handle when dropdown is opened
onClose Func handle when dropdown is closed
transformResult Func handle when data dropdown is change
placeholderText String custom placeholder input
loadingText String custom loading text
items Number How many results to show at once (only for screen width > 768px)
You might also like...
A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Vue Tags Input v4 Forked from voerro/vue-tagsinput A simple tags input with typeahead built with Vue.js 2. Installation via NPM npm i @seriouslag/vue-

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete
A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete

Vim Stylus Vim + Stylus = fast, effective and convenient CSS workflow! Features All HTML5 tags and CSS3 props are covered Correct highlighting for int

πŸ” Vue autosuggest component.
πŸ” Vue autosuggest component.

vue-autosuggest πŸ” Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

A configurable & lightweight Vue wrapper component that enables
A configurable & lightweight Vue wrapper component that enables

A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elements.

Mention component for Vue.js
Mention component for Vue.js

vue-mention Mention popper for input and textarea Documentation Sponsors Quick start script import { Mentionable } from 'vue-mention' const users =

 πŸ” Autosuggest component built for Vue
πŸ” Autosuggest component built for Vue

vue-autosuggest πŸ” Autosuggest component built for Vue. Table of Contents Examples Features Installation Usage Props Inspiration Contributors LICENSE

A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.
A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying.

v-autosuggest A simple modular Vuejs component that autosuggest input from a dyanamic or static data querying. Table of contents Installation Usage Pr

A simple tag component with typeahead
A simple tag component with typeahead

v-tag-suggestion A simple tag component with typeahead ⌨️ Install via npm npm install vue-tag-suggestion Import and register where you want to use imp

Owner
Null Tester
Null Tester
Autocomplete component for Vue js

vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

Charlie Kassel 136 Nov 8, 2022
Feature-rich autocomplete component for Vue.js

vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

Marketplace Technologies 442 Jan 4, 2023
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: > npm i

Alex Urquhart 209 Nov 19, 2022
A Vue component for autocomplete email domains

vue-email-dropdown A Vue component for autocomplete email domains Features Allows passing a list of domains to be used in for the suggestions. Allows

Danny Feliz 27 Nov 24, 2022
Autocomplete Component for Vue.Js

vue-autocomplete Autocomplete Component for Vue.Js Intro Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vu

Naufal Rabbani 210 Jan 18, 2022
Vue 2 Component to make Autocomplete element.

Vue 2 Autocomplete Autocomplete component for Vue 2. This is a fork of vue2-autocomplete - Naufal Rabbani [email protected] Install You can imp

Eduardo Aguad 0 Oct 12, 2017
A Vue Autocomplete component with accessibility and simplicity in mind.

VueCompleter A Vue Autocomplete component with accessibility and simplicity in mind. Installation npm install vue-completer or yarn add vue-completer

Tom Elliott 3 Nov 8, 2020
vue autoComplete component

vueto-complete vue autoComplete component Index Features Installation Examples Props Slots Events Styling LICENSE Features Supports full control over

Ahmed Abdallah 16 Jan 10, 2022
Google Autocomplete Vue Componet

Google Autocomplete I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as

Gustavo Ocanto 275 Aug 29, 2022
🧱 Very Downshift like autocomplete solution for Vue

Vue Combo Blocks ?? Provides all the building blocks needed for accessible autocomplete, combobox, or typeahead component. A very Downshift like autoc

Simeon Kerkola 17 Jul 7, 2022