multi-items-input
You can select multiple items just with keyboard. Input some keywords and using ↓, ↑,tab or enter to select, delete to remove.
Table of contents
Examples
Project page
https://jwolfcn.github.io/vue-multi-items-input/
Installation
npm install --save multi-items-input
Usage
In your entry js, main.js mostly
import Vue from 'vue'
import 'multi-items-input'
import 'multi-items-input/dist/multi-items-input.css'
Then you can use the tag multi-items-input
<multi-items-input
:fetch="search"
placeholder="placeholder"
:height="100"
separator=";"
@select="select"
@delete="onDelete"
:selection-only="false"
></multi-items-input>
For more details, refer to the example directory.
API
Properties
Property | Type | Default | Description |
---|---|---|---|
v-model | Array | Binding value. Each object within it should be like {name: 'xx', id: xx}
|
|
placeholder | String | Place holder of input. | |
separator | String | Separator between items. | |
height | Number | 100 | Height of the container. |
fetch | Function(queryStr, done) | Triggered to request for suggestion. Keywords would passed as the first parameter. The second parameter is a callback function which notifys the request is completed. | |
trigger-on-focus | Boolean | true | Whether trigger the fetch function on focus. |
selection-only | Boolean | false | Whether the user should select from the suggestion. |
zIndexOfPopper | Number | - | Set the z-index of the popper. |
disabled | Boolean | false | Set input editable |
Events
event | Parameters | description |
---|---|---|
delete | Array, Object | The first parameter is the array of the selected items. Second is the item which deleted. |
select | Object, Array | The first parameter is the item added. Second is the array of the selected items. |
License
MIT © Jwolf