Skip to content
Autocomplete component for Vue.js
Branch: master
Clone or download
paliari Merge pull request #85 from paliari/dependabot/npm_and_yarn/macaddres…
…s-0.2.9

Bump macaddress from 0.2.8 to 0.2.9
Latest commit 760e90b Jun 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin fix bin/publish May 8, 2017
demo fix console.error name of null on demo Jan 22, 2018
dist build Jan 27, 2018
docs build demo Jan 27, 2018
src Fix typo Feb 20, 2018
.envrc add .envrc Apr 26, 2017
.gitignore fix console.error name of null on demo Jan 22, 2018
README.md add focus event Jan 27, 2018
build.config.js build.config.js Apr 26, 2017
package.json Update devDependencies.serve Jul 18, 2018
yarn.lock Bump macaddress from 0.2.8 to 0.2.9 Jun 13, 2019

README.md

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 add v-autocomplete

Using npm

npm i --save v-autocomplete

Demo

DEMO

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'

import Autocomplete from 'v-autocomplete'

// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'v-autocomplete/dist/v-autocomplete.css'

Vue.use(Autocomplete)

Browser

<!-- Include after Vue -->
<link rel="stylesheet" href="v-autocomplete/dist/v-autocomplete.css"></link>
<script src="v-autocomplete/dist/v-autocomplete.js"></script>
<script>
  Vue.use(VAutocomplete.default)
</script>

Example

<template>
  <v-autocomplete :items="items" v-model="item" :get-label="getLabel" :component-item='template' @update-items="updateItems">
  </v-autocomplete>
</template>

<script>
import ItemTemplate from './ItemTemplate.vue'
export default {
  data () {
    return {
      item: {id: 9, name: 'Lion', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
      items: [],
      template: ItemTemplate
    }
  },
  methods: {
    getLabel (item) {
      return item.name
    },
    updateItems (text) {
      yourGetItemsMethod(text).then( (response) => {
        this.items = response
      })
    }
  }
}
</script>

ItemTemplate example:

<template>
  <div>
    <b>#{{item.id}}</b>
    <span>{{ item.name }}</span>
    <abbr>{{item.description}}</abbr>
  </div>
</template>

<script>
export default {
  props: {
    item: { required: true },
    searchText: { required: true }
  }
}
</script>

Properties

Name Type Required Default value Info
items Array Yes List items
component-item Vue Component or Function or String No Item Item list template
min-len Number No 3 Min length to trigger the updateItems event
wait String No 500 Miliseconds dela to trigger the updateItems event
get-label Function No function(item) { return item } Anonymous function to extract label of the item
value Mixed No Initial value (use v-model)
auto-select-one-item Boolean No true Auto select item if result one item in items
input-attrs Object No {} Attributes for input
keep-open Boolean No false If true, suggestions list stays open even when input is not active
placeholder String No Deprecated, will be removed in the next version. Use input-attrs
input-class String No Custom class of input search. Deprecated, will be removed in the next version. Use input-attrs
disabled Boolean No false Disable input. Deprecated, will be removed in the next version. Use input-attrs

Events

Name Params Info
input item: Item changed Triggered after any changed in the model
change text: Text of search input Triggered after every change in the search input
update-items text: Text of search input Same as change, but respecting min-len and wait
item-clicked item: Item clicked Triggered after a click on a suggestion
item-selected item: Item selected Like @input, but only when has value
blur text: Text of search input Triggered on blur in the search input
focus text: Text of search input Triggered on focus in the search input

What about appearence?

Just overwrite their css classes. See the structure in stylus lang:

.v-autocomplete
  .v-autocomplete-input-group
    .v-autocomplete-input
  .v-autocomplete-list
    .v-autocomplete-list-item
      &.v-autocomplete-item-active

Follows the css used in the DEMO:

.v-autocomplete
  .v-autocomplete-input-group
    .v-autocomplete-input
      font-size 1.5em
      padding 10px 15px
      box-shadow none
      border 1px solid #157977
      width calc(100% - 32px)
      outline none
      background-color #eee
    &.v-autocomplete-selected
      .v-autocomplete-input
        color green
        background-color #f2fff2
  .v-autocomplete-list
    width 100%
    text-align left
    border none
    border-top none
    max-height 400px
    overflow-y auto
    border-bottom 1px solid #157977
    .v-autocomplete-list-item
      cursor pointer
      background-color #fff
      padding 10px
      border-bottom 1px solid #157977
      border-left 1px solid #157977
      border-right 1px solid #157977
      &:last-child
        border-bottom none
      &:hover
        background-color #eee
      abbr
        opacity 0.8
        font-size 0.8em
        display block
        font-family sans-serif

Development

$ git clone https://github.com/paliari/v-autocomplete.git
$ cd v-autocomplete

Using yarn

# install dependencies
$ yarn install

# compile demo for development
$ yarn dev

# open Browser and start serve in demo
$ yarn demo:open

# compile dist demo
$ yarn dist:demo

# compile dist
$ yarn dist

Using npm

# install dependencies
$ npm install

# compile demo for development
$ npm run dev

# open Browser and start serve in demo
$ npm run demo:open

# compile dist demo
$ npm run dist:demo

# compile dist
$ npm run dist

Authors

License

This project is licensed under MIT License

You can’t perform that action at this time.