A simple autocomplete input 🔨 built using Vue.JS & Typescript

Overview

vue-simple-complete

https://github.com/rohitkvv/vue-simple-complete/releases/tag/1.2.0

Description

A simple autocomplete input 🔨 built using Vue.JS & Typescript

DeepScan grade Language grade: JavaScript Snyk Vulnerabilities for GitHub Repo

Project setup

yarn add vue-simple-complete

npm i vue-simple-complete

">



Wiki

Props Type Description
:items Array This contains data for the auto-complete, this can either be an array of string or an array of custom objects
:objectMatchkey String This is required if the items is of type object array. The objectMatchKey then becomes the key that is used within the match function
:template Object This is required if the items is of type object array. The template is then used to display the items as per the defined template. If the template is not defined then ObjectMatchKey will be used to form the items display
Function Type Description
@inputChanged Function When input is changed this event gets fired. The consumers of the vue-simple-complete component can listen to this event and get the entered or selected value

📄 Additional Info:

  • The component comes with a basic styling, and the items panel usually takes the full width of the container it's placed in. To contain it's width, it can be wrapped within a div with custom width.
  • Up & Down keys can be used to go over the items in the list.
  • Down key can be used to open the items panel, when the panel is collapsed.
  • Esc key will clear out the selected value when the focus is on the input

Example-1: With items of Object type

">

   

   

">



ObjectImage1 ObjectImage2 ObjectImage3

Example-2: With items of string type

">

   

   

">



StringImage1 StringImage2 StringImage3

Note:

There is a known issue where you will see the following error when you import the component into a TypeScript project

Could not find a declaration file for module 'vue-simple-complete'.
Try `npm install @types/vue-simple-complete` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-simple-complete';`

As a temporary solution, please edit your TypeScript Config file (tsconfig.json) and add a new key value pair, as -


"noImplicitAny": false

Comments
Releases(1.2.0)
Owner
Rohit K V V
Rohit K V V
Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue

Autocomplete Accessible autocomplete component for vanilla JavaScript and Vue. Demo Take a look at the documentation page, and the Codepen examples. F

Muhamad Septian 0 Dec 3, 2019
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element

v-suggest A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine in

Terry Zeng 74 Aug 27, 2022
Autocomplete component for Vue.js

v-autocomplete Autocomplete component for Vue.js This component is css-free. The idea is to be used with any framework. Installation Using yarn yarn a

Marcos 347 Jan 3, 2023
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
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
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
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

Ilia Loginov 48 Dec 28, 2022
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

soraino 9 Nov 24, 2022
Vue3-simple-typeahead - A simple and lightweight Vue3 typeahead component that show a suggested list of elements while the user types in.

vue3-simple-typeahead A Vue3 component for a simple typeahead component. It will show a list of suggested items based on the user input. The component

frikinside 52 Jan 8, 2023
🔍 Autosuggest component built for Vue

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

Алексей Мышкин 0 Dec 12, 2019
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

Maheshkumar 39 Mar 26, 2022
vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications

Vue Instant! vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications. Table of contents Examp

Santiago Blanco 420 Dec 27, 2022