multi-items-input

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
• Installation

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