Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plantain-00/select2-component
A vuejs and reactjs select component.
https://github.com/plantain-00/select2-component
Last synced: 5 days ago
JSON representation
A vuejs and reactjs select component.
- Host: GitHub
- URL: https://github.com/plantain-00/select2-component
- Owner: plantain-00
- License: mit
- Created: 2017-05-29T14:02:31.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-09-14T10:54:09.000Z (about 3 years ago)
- Last Synced: 2024-10-25T13:45:01.487Z (12 days ago)
- Language: TypeScript
- Homepage:
- Size: 15.1 MB
- Stars: 23
- Watchers: 5
- Forks: 12
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# select2-component
[](https://david-dm.org/plantain-00/select2-component)
[](https://david-dm.org/plantain-00/select2-component#info=devDependencies)
[](https://ci.appveyor.com/project/plantain-00/select2-component/branch/master)
[](https://badge.fury.io/js/select2-component)
[](https://www.npmjs.com/package/select2-component)
[](https://github.com/plantain-00/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
```html
```
## vuejs component
[](https://unpkg.com/select2-vue-component)
`npm i select2-vue-component`
```ts
import { Select2 } from "select2-vue-component";
app.component('select2', Select2)
```
or
```html
```
```html
```
the online demo:
## reactjs component
[](https://unpkg.com/select2-react-component)
`npm i select2-react-component`
```ts
import { Select2 } from "select2-react-component";
```
or
```html
```
```jsx
this.update(value)}>
```
the online demo:
## properties and events of the component
name | type | description
--- | --- | ---
data | [Select2Data](#select2-data-structure) | the data of the select2
value | [Select2Value](#select2-data-structure)? | 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](#select2-data-structure)) => 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
```ts
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`
```ts
import Vue from "vue";
import { AutoComplete } "select2-vue-component";
Vue.component("auto-complete", AutoComplete)
```
```html
```
### reactjs auto complete component
`npm i select2-react-component`
```ts
import { AutoComplete } from "select2-react-component";
```
```jsx
this.search(value)}
select={value => this.select(value)}>
```
### properties and events of the auto complete component
name | type | description
--- | --- | ---
data | [Select2Data](#select2-data-structure) | the data of the select2
value | string | initial value
update | (value: [Select2UpdateValue](#select2-data-structure)) => void | triggered when user change search text or select an option
select | (value: [Select2UpdateValue](#select2-data-structure)) => 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
```ts
// v5 vue 2
import 'select2-vue-component'
// v6 vue 3
import { Select2 } from "select2-vue-component"
app.component('select2', Select2)
```
```bash
# v4
npm i select2-component
# v5
npm i select2-vue-component
npm i select2-react-component
npm i select2-angular-component
```
```ts
// 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";
```
```html
// v4
// v5
```
```ts
// v3 angular AOT:
import { Select2Module } from "select2-component/angular";
// v4 angular AOT:
import { Select2Module } from "select2-component/aot/angular";
```
```ts
// v3.1
import { Select2Module } from "select2-component/angular";
import { Select2 } from "select2-component/angular.component";
// v3.0
import { Select2Component } from "select2-component/angular";
```
```ts
// v3
import "select2-component/vue";
import { Select2 } from "select2-component/react";
import { Select2Component } from "select2-component/angular";
// v2
import "select2-component/dist/vue";
import { Select2 } from "select2-component/dist/react";
import { Select2Component } from "select2-component/dist/angular";
```
```js
// v2
// v1
```