@ronanfabio/select2-component NPM

select2-component

A vuejs, reactjs and angular select component.

features

vuejs component
reactjs component
angular 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
material style(angular only)
form binding(angular only)

install

npm i select2-component

link css

<link rel="stylesheet" href="./node_modules/select2-component/select2.min.css" />

vuejs component demo

npm i vue vue-class-component

import "select2-component/vue";

<select2 :data="data"
    :value="value"
    @update="update($event)">
</select2>

the online demo: https://plantain-00.github.io/select2-component/demo/vue/index.html

reactjs component demo

import { Select2 } from "select2-component/react";

<Select2 data={this.data}
    value={this.value}
    update={value => this.update(value)}>
</Select2>

the online demo: https://plantain-00.github.io/select2-component/demo/react/index.html

angular component demo

import { Select2Module } from "select2-component/angular";

@NgModule({
    imports: [BrowserModule, FormsModule, Select2Module],
    declarations: [MainComponent],
    bootstrap: [MainComponent],
})
class MainModule { }

<select2 [data]="data"
    [value]="value"
    (update)="update($event)">
</select2>

the online demo: https://plantain-00.github.io/select2-component/demo/angular/index.html

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
material	`""` or `true`	enable material style(angular only)
editPattern	(str: string) => string	use it for change the pattern of the filter search(angular only)
ngModel/id/required/disabled/readonly/tabIndex	just like a `select` control	(angular only)
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

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;

type Select2UpdateValue = Select2Value | Select2Value[];

change log

// 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>

@types/node tslib

@everything-registry/sub-chunk-789

3.1.5

7 years ago