select2-component
select2-component copied to clipboard
A vuejs and reactjs select component.
select2-component
A vuejs and reactjs select component.
features
- vuejs component
- reactjs component
- select one
- options or groups
- scroll
- local search
- select by keyboard
- disabled option
- disabled component
- hide search box
- placeholder
- custom component(vuejs and reactjs only)
- multiple selection
link css
<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />
vuejs component
npm i select2-vue-component
import { Select2 } from "select2-vue-component";
app.component('select2', Select2)
or
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/select2-vue-component/dist/select2-vue-component.min.js"></script>
<select2 :data="data"
:value="value"
@update="update($event)">
</select2>
the online demo: https://plantain-00.github.io/select2-component/packages/vue/demo
reactjs component
npm i select2-react-component
import { Select2 } from "select2-react-component";
or
<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/select2-react-component/dist/select2-react-component.min.js"></script>
<Select2 data={this.data}
value={this.value}
update={value => this.update(value)}>
</Select2>
the online demo: https://plantain-00.github.io/select2-component/packages/react/demo
properties and events of the component
name | type | description |
---|---|---|
data | Select2Data | the data of the select2 |
value | Select2Value? | initial value |
disabled | boolean? | whether the component is disabled |
minCountForSearch | number? = 6 | hide search box if options.length < minCountForSearch |
placeholder | string? | the placeholder string if nothing selected |
customSearchEnabled | boolean? | will trigger search event, and disable inside filter |
multiple | boolean? | select multiple options |
update | (value: Select2UpdateValue) => void | triggered when user select an option |
open | () => void | triggered when user open the options |
search | (text: string) => void | triggered when search text changed |
keydown, keyup, keypress | (e: KeyboardEvent) => void | triggered when search input triggers keydown, keyup, keypress |
minimumInputLength | number? | if minimumInputLength = 3, only start searching when the user has input 3 or more characters |
maximumInputLength | number? | if maximumInputLength = 20, only allow terms up to 20 characters long |
keepSearchText | boolean? | keep search text when the dropdown opens |
select2 data structure
type Select2Data = (Select2Group | Select2Option)[];
type Select2Group = {
label: string;
options: Select2Option[];
classes?: string;
};
type Select2Option = {
value: Select2Value;
label: string;
disabled?: boolean;
component?: string | Function; // the component
classes?: string;
};
type Select2Value = string | number | boolean;
type Select2UpdateValue = Select2Value | Select2Value[];
auto complete
vuejs auto complete component
npm i select2-vue-component
import Vue from "vue";
import { AutoComplete } "select2-vue-component";
Vue.component("auto-complete", AutoComplete)
<auto-complete :data="data"
:value="value"
@search="search($event)"
@select="select($event)">
</auto-complete>
reactjs auto complete component
npm i select2-react-component
import { AutoComplete } from "select2-react-component";
<AutoComplete data={this.data}
value={this.value}
search={value => this.search(value)}
select={value => this.select(value)}>
</AutoComplete>
properties and events of the auto complete component
name | type | description |
---|---|---|
data | Select2Data | the data of the select2 |
value | string | initial value |
update | (value: Select2UpdateValue) => void | triggered when user change search text or select an option |
select | (value: Select2UpdateValue) => void | triggered when user select an option |
search | (text: string) => void | triggered when search text changed |
keydown, keyup, keypress | (e: KeyboardEvent) => void | triggered when search input triggers keydown, keyup, keypress |
change logs
// v5 vue 2
import 'select2-vue-component'
// v6 vue 3
import { Select2 } from "select2-vue-component"
app.component('select2', Select2)
# v4
npm i select2-component
# v5
npm i select2-vue-component
npm i select2-react-component
npm i select2-angular-component
// v4
import "select2-component/vue";
import { Select2 } from "select2-component/react";
import { Select2Module } from "select2-component/angular";
// v5
import "select2-vue-component";
import { Select2 } from "select2-react-component";
import { Select2Module } from "select2-angular-component";
// v4
<link rel="stylesheet" href="./node_modules/select2-component/select2.min.css" />
// v5
<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />
// v3 angular AOT:
import { Select2Module } from "select2-component/angular";
// v4 angular AOT:
import { Select2Module } from "select2-component/aot/angular";
// v3.1
import { Select2Module } from "select2-component/angular";
import { Select2 } from "select2-component/angular.component";
// v3.0
import { Select2Component } from "select2-component/angular";
// v3
<link rel="stylesheet" href="./node_modules/select2-component/select2.min.css" />
import "select2-component/vue";
import { Select2 } from "select2-component/react";
import { Select2Component } from "select2-component/angular";
// v2
<link rel="stylesheet" href="./node_modules/select2-component/dist/select2.min.css" />
import "select2-component/dist/vue";
import { Select2 } from "select2-component/dist/react";
import { Select2Component } from "select2-component/dist/angular";
// v2
<select2 [data]="data"
[value]="value"
(update)="update($event)">
</select2>
// v1
<select2 [data]="data"
[value]="value"
(select)="select($event)">
</select2>