v-autocomplete

    1.8.2 • Public • Published

    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

    Install

    npm i v-autocomplete

    DownloadsWeekly Downloads

    4,258

    Version

    1.8.2

    License

    MIT

    Last publish

    Collaborators

    • paliari_ci
    • felipebohnertpaetzold
    • dflourusso
    • m.paliari
    • neves