vueto-complete

vue autoComplete component

Index

• Features
• Installation
• Examples
• Props
• Slots
• Events
• Styling
• LICENSE

Features

• Supports full control over functionality and display.
• Supports regular lists as well as AJAX fetching.
• Supports grouping of results.
• Supports slots for custom rendering and formatters for custom formatting.
• Supports full control over styling.
• Supports full control over filtering and sorting results.
• Supports multiple keys to search against.
• Supports keyboard accessibility.
• Fires events for all its lifesycle hooks.

Installation

npm install --save vueto-complete

or

yarn add vueto-complete

Examples

<template>
  <div>
    <VuetoComplete
        v-model="query"
        :auto-complete-list="list"
        :styles="styles"
    >
    VuetoComplete>
  div>
template>

<script>
  import VuetoComplete from 'vueto-complete';
  
  const styles = {
    container: {
      maxWidth: '500px',
    },
    input: {
      border: '1px solid gray',
    },
    focusedInput: {
      background: '#e0e0e0',
    },
  };
  
  export default {
    name: 'app',
    data: () => ({
      query: '',
      styles,
      list: [
        'Cairo, Egypt',
        'Cairo, Thomasville, United States',
        'Cairo, Southwest Illinois, United States',
        'Giza, Cairo, Egypt',
        'Cairo, Central West Virginia, United States',
        'Cairo Montenotte, Savona - Riviera Delle Palme, Italy',
      ],
    }),
    components: {
      VuetoComplete,
    }
  };
script>