Vue Searchbar
A vue.js component searchbar. Allows for delayed or on key press search and can be integrated with vuex.
How to initialize Vue Searchbar
Vue searchbar is built as a vue plugin. It can be initialized just as the Vue documentation states.
import Searchbar from '@pderas/vue2-searchbar';
Vue.use(Searchbar);
Usage
Creation
A search bar can be created simply by adding the component to a file and passing it a search function. This function will run either on key press or after a delay depending on what props or global options have been set.
<searchbar :on-search="searchFunc" />
export default {
methods: {
searchFunc(search) {
alert('You have tried to search for: ' + search);
}
}
}
Options
Option | Default | Description |
---|---|---|
iconSide | 'left' | Determines what side the search icon is on. |
searchWhen | 'onDelay' | If the search should run after defined timeout or on key press. |
timoutDelay | 1000 | The amount of time before a new search will occur. |
value | null | optional value field for use with v-model |
License
This project is covered under the MIT License. Feel free to use it wherever you like.