Collection of Good Vue Autocomplete Components for Your Vue.js App

Collection of Good Vue Autocomplete Components for Your Vue.js App

The Vue AutoComplete component helps users by providing a list of suggestions to select from as they type. It supports data binding, filtering, and more.

The Vue AutoComplete component helps users by providing a list of suggestions to select from as they type. It supports data binding, filtering, and more.

1. vue-suggestion

Suggestion list input for Vue.js, inspired by v-autocomplete. Your search engine, your CSS, your everything...

vue-suggestion

Demo

Download


2. Accessible Autocomplete

Accessible autocomplete component for vanilla JavaScript and Vue.

Features

  • Accessible, with full support for ARIA attributes and keyboard interactions. Based on the WAI-ARIA Authoring Practices.
  • Available as a JavaScript or Vue component, with React coming soon.
  • Core package available if you want to bring your own rendering layer.
  • Customizable. Easily bring your own CSS, or take full control of the component rendering.
  • Support for asynchronous data fetching.

Autocomplete

Demo

Download


3. Select Auto-Complete

Provides a capability of auto-completed searching for results inside a select input field.

Select Auto-Complete

Download


4. vue-cool-select

Select with autocomplete, slots, bootstrap and material design themes.

Features

  • no dependencies
  • props (30) allow you to customize a component in a various ways
  • slots (13) allow content to be changed anywhere
  • events (8) will let you know about everything
  • autocomplete (you can use custom search, you can also disable the search input)
  • keyboard controls (not only through the arrows)
  • support on mobile devices
  • validation, state of error and success
  • disabled and readonly
  • small and large sizes (as in bootstrap)
  • the ability to set your styles, you can write theme from scratch. 2 themes: Bootstrap 4 (equal styles), Material Design
  • TypeScript support
  • tab navigation
  • SSR (Server-Side Rendering)
  • auto determine the suitable position for the menu if it goes beyond the viewport

vue-cool-select

Demo

Download


5. Vue Form Autocomplete - Simple

Vue Form Autocomplete Custom Component.

Able to use single or multiple select. Use scope slot to change the template

Vue Form Autocomplete - Simple

Demo and Download


6. Vue Tags Input

A simple tags input with typeahead built with Vue.js 2.

Vue Tags Input

Demo

Download


7. At.js for Vue.

At.js is An autocompletion library to autocomplete mentions, smileys etc.

  • Filter/Scroll/Insert/Delete
  • Keyboard/Mouse events
  • Plain-text based, no jQuery, no extra nodes
  • ContentEditable
  • Avatars, custom templates
  • Vue2
  • Vue1

At.js for Vue

Demo

Download


Thank for read!

vue-autocomplete autocomplete-component autocomplete vue-js autocomplete-vue

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

A Vue Autocomplete Component That Abbreviations

A Vue Autocomplete component that autocompletes abbreviations/acronyms by description rather than the abbreviation text.

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

Collection of 14 Vue Select Component for Vue.js App

Vue select component can handle multiple selections. It's enabled with the multiple property. Like with the single selection, you can pull out the new value by accessing event. target. value in the onChange callback.