autocomplete-vue-lacateam

A Vue.js project

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Jul 20, 2017Jul 10, 2017Minified + gzip package size for autocomplete-vue-lacateam in KB

Readme

autocomplete-vue-lacateam

AutoComplete VueJs 2

Installation

$ npm install --save autocomplete-vue-lacateam

Example

import autocomplete from 'autocomplete-vue-lacateam'
    
new Vue({
  el: '#app',,
  components: { autocomplete },
  data () {
    return {
      url: '/searchusers',
      limit: 4,
      placeholder: 'Name|Email',
      bgcolorselect: '#000000'
    }
  },
  methods: {
    callbackdata (data) {            
      console.log(data);
      // data : return data clicked
    }
  }
})
<body id="app">
  <autocomplete 
  url="url" 
  placeholder="placeholder" 
  limit="5"
  :callbackdata="callbackdata" 
  bgcolorselect="bgcolorselect">
   <template scope="item">
      <h4>{{ item.text.name }}</h4>
      <p>{{ item.text.email }}</p>
      <!--default template
         <h4>{{item.value?item.value:item.name}}</h4>
      -->
    </template>
  </autocomplete>
</body>

Props

Name Type Default Required Description
url String true Total itens in server side
callbackdata Function true Returns the selected result
Options
Name String Default Description
bgcolorselect String "#650065" Background Color when select and focus data
placeholder String "Search" PlaceHolder
limit String "3" Limit
fielddatashow String "name" Data show in input
start String "3" Keyword length to start searching
icon String "glyphicon glyphicon-search text-muted" icon of the input control
iconleft String "false" By default, the icon on the right is equivalent to inconleft = "true"

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.