Vue 2 Component to make Autocomplete element.

Last update: Oct 12, 2017

Vue 2 Autocomplete

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

vue Autocomplete component

Install

You can import vue2-autocomplete.vue to your vue component file like this and process it with your preprocessor.

You can install it via Yarn

yarn add v2-autocomplete

Or you can install it via NPM

npm i v2-autocomplete --save

Configure

import Autocomplete from 'v2-autocomplete';
require('v2-autocomplete/dist/style/vue2-autocomplete.css');
Vue.component('autocomplete', Autocomplete);

// Styles
require('vue2-autocomplete-js/dist/style/vue2-autocomplete.css')

Its style is very customizable. You can put any CSS over it. And You can add custom class via its prop.

Usage

">
<template>

  <autocomplete
    url="http://localhost/proyek/goodmovie/api/api/v1/search"
    anchor="title"
    label="writer"
    :on-select="getData">
  autocomplete>

template>


<script>

  import Autocomplete from 'vue2-autocomplete-js';

  export default {

    components: { Autocomplete },

    methods: {
      getData(obj){
        console.log(obj);
      }
    }
  };

script>

Available Props

">
<template>

  <autocomplete
    url="http://localhost/proyek/goodmovie/api/api/v1/search"
    anchor="title"
    label="writer"
    :onSelect="getData"
    :customParams="{ token: 'dev' }"
    :customHeaders="{ Authorization: 'bearer abc123' }"


    :required="true"
    id="custom id"
    className="custom class name"
    :classes="{ wrapper: 'form-wrapper', input: 'form-control', list: 'data-list', item: 'data-list-item' }"
    placeholder="placeholder"
    :initValue="initial value"


    :options="[]"
    :min="3"
    :debounce="2000"
    :filterByAnchor="true"
    :encodeParams="true"

    :onShouldGetData="getData"
    :onInput="callbackEvent"
    :onShow="callbackEvent"
    :onBlur="callbackEvent"
    :onHide="callbackEvent"
    :onFocus="callbackEvent"
    :onSelect="callbackEvent"
    :onBeforeAjax="callbackEvent"
    :onAjaxProgress="callbackEvent"
    :onAjaxLoaded="callbackEvent"
    :onShouldRenderChild="renderChild"
  >
  autocomplete>

template>

Props

url (String) (optional if onShouldGetData is present)

the URL must be active (not from file). the component will fetch JSON from this URL and passing one params (default : q) query. like:

http://some-url.com/API/list?q=

There are no filter and limit action inside the component. So, do it in your API logic.

param (String: "q")

name of the search parameter to query in Ajax call. default is q

min (Number: 0)

Minimum input typed chars before performing the search query. default is 0

anchor* (String)

It's a object property path that used for Anchor in suggestions list. Example anchor="name" will get the name property of your JSON object. Like ("Bambang", "Sukijan", "Bejo") in the demo above. Or you can reach the deep value of your object. Like anchor="geometry.location.lat"

label (String)

Same as anchor but it's used for subtitle or description of list

options (Array)

Manual pass an Array of list options to the autocomplete.

filterByAnchor (Boolean: true)

When you're using options props, you can have autocomplete to filter your data. Or you can just show your data directly without any filter from autocomplete. The options will be filtered by anchor and it according to the user input.

encodeParams (Boolean: true)

Autocomplete will encodeURIComponent all your params before ajax send, When this props sets to true. Default is true #35

debounce (Number)

Delay time before do the ajax for the data

required (Boolean)

Required attribute for input

placeholder (String)

Placeholder for input

className (String)

Custom class name for autocomplete component

classes (Object)

Spesific custom class for each part. available: wrapper, input, list, and item

id (String)

Custom id name for autocomplete component

debounce (number)

Number of milliseconds the user should stop typing for before the request is sent. Default is 0, meaning all requests are sent immediately.

process (Function)

Function to process the API result with. Should return an array of entries or an object whose properties can be enumerated.

template (Function)

Function to process each result with. Takes the type of an API reply element and should return HTML data.

Callback Events

You can make a callback event via props.

onInput (Function)

On Input event in autocomplete

onShow (Function)

On Show event in autocomplete list

onBlur (Function)

When autocomplete is blured

onHide (Function)

When autocomplete list is hidden

onFocus (Function)

When autocomplete input in focus mode

onSelect (Function)

When user has selected one item in the list

onBeforeAjax (Function)

Before the ajax send

onAjaxProgress (Function)

While ajax is fetching the data

onAjaxLoaded (Function)

When ajax process is totally loaded

onShouldGetData (Function)

Manually Process the whole ajax process. If it's a Promise, it should resolve the options for the list of autocomplete. If it isn't a Promise, you can manually pass the options to the props of autocomplete

">
<autocomplete
  anchor="formatted_address"
  label="formatted_address"
  :onShouldGetData="getData"
>
autocomplete>
methods: {
  promise(value) {
    return new Promise((resolve, reject) => {
      let ajax = new XMLHttpRequest();
      ajax.open('GET', `https://maps.googleapis.com/maps/api/geocode/json?address=${value}`, true);
      // On Done
      ajax.addEventListener('loadend', (e) => {
        const { responseText } = e.target
        let response = JSON.parse(responseText);
        // The options to pass in the autocomplete
        resolve(response.results)
      });
      ajax.send();
    })
  },

  nonPromise() {
    getData(value) {
      let ajax = new XMLHttpRequest();
      ajax.open('GET', `https://maps.googleapis.com/maps/api/geocode/json?address=${value}`, true);
      // On Done
      ajax.addEventListener('loadend', (e) => {
        const { responseText } = e.target
        let response = JSON.parse(responseText);
        // The options to pass in the autocomplete props
        this.options = response.results;
      });
      ajax.send();
    },
  }
}

process (Function)

Process the result before retrieveng the result array. You can shape your data here before it's passed to the autocomplete

onShouldRenderChild (Function)

Wanna use custom template for the list? Now, you can do it!

">
<autocomplete
  anchor="formatted_address"
  label="formatted_address"
  :onShouldRenderChild="renderChild"
>
autocomplete>
${data.something} ` }, }">
methods: {
  renderChild(data) {
    return `
      ${data.src}" />
      ${data.something}
    `
  },
}

Methods

You can do some methods by accessing the component via javascript.

this.$refs.autocomplete.someMethod()

setValue (String)

To set the value of the autocomplete input

Contact me if you wan't to do something

[email protected]

License

MIT Copyright (c) 2017 Eduardo Aguad

GitHub

https://github.com/eaguad1337/vue2-autocomplete
You might also like...

🧱 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

May 18, 2022

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

Jan 15, 2022

🔍 Vue autosuggest component.

🔍 Vue autosuggest component.

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

Jun 20, 2022

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.

May 26, 2022

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 =

Jun 21, 2022

🔍 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

Dec 12, 2019

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

Feb 11, 2022

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

Mar 26, 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 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

Jul 3, 2022
A Vue2 plugin for input content suggestions, support using keyboard to navigate and quick pick, it make use experience like search engine input element
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

Apr 25, 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

May 26, 2022
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

May 12, 2022
Feature-rich autocomplete component for Vue.js
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

Jun 19, 2022
An autocomplete/typeahead component for Vue 2 and Bootstrap 4
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

May 5, 2022
A Vue component for autocomplete email domains
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

Jun 11, 2022
Autocomplete Component for Vue.Js
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

Jan 18, 2022
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

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

Jan 10, 2022
Google Autocomplete Vue Componet
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

Apr 8, 2022