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>