vueto-complete v0.1.21

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>

<template>
  <div>
    <VuetoComplete
        :fetch-handler="getTodos"
        display-key="title"
        :filter-handler="getCompleted"
        @select="onSelect"
    >
    </VuetoComplete>
  </div>
</template>

<script>
  import VuetoComplete from 'vueto-complete';
  
  export default {
    name: 'app',
    methods: {
      /**
       * get todos
       *
       * @param {String} query
       * @returns {Promise}
       */
      getTodos(query) {
        return fetch('https://jsonplaceholder.typicode.com/todos')
          .then(response => response.json());
      },
      
      /**
       * filter todos by completed
       * @param {Array<object>} todos
       * @return {Array<object>} todos
       */
      getCompleted(todos) {
        return todos.filter(({ completed }) => completed);
      },
  
      /**
       * handle select
       * @param {Object} todo
       */
      onSelect(todo) {
        console.log(todo);
      }
    },
    components: {
      VuetoComplete,
    },
  };
</script>

<template>
  <div>
    <VuetoComplete
        :fetch-handler="getPosts"
        display-key="title"
        :search-keys="['title', 'body']"
        :debounce-time="200"
        :min-chars-to-auto-complete="2"
        :max-results-to-display="5"
        @select="onSelect"
    >
      <template slot="item-icon" slot-scope="{ item }">
        <i :class="`post-icon-${item.id}`"></i>
      </template>
    </VuetoComplete>
  </div>
</template>

<script>
  import VuetoComplete from 'vueto-complete';
  
  export default {
    name: 'app',
    methods: {
      /**
       * get posts
       *
       * @param {String} query
       * @returns {Promise}
       */
      getPosts(query) {
        return fetch('https://jsonplaceholder.typicode.com/posts')
          .then(response => response.json());
      },
      
      /**
       * handle select
       * @param {Object} post
       */
      onSelect(post) {
        console.log(post);
      }
    },
    components: {
      VuetoComplete,
    },
  };
</script>

Props

Slots

Events

Styling

LICENSE

MIT