The ts-select2 from rifkiard

View Code? Open in Web Editor NEW

This project forked from ivkan/ts-select2

TsSelect2 is a version of Select2 written in typescript without any dependencies. It supports searching, remote data sets, and infinite scrolling of results.

HTML 0.58% JavaScript 0.29% TypeScript 99.14%

ts-select2's Introduction

Description

TsSelect2 is a version of Select2 written in typescript without any dependencies. It supports searching, remote data sets, and infinite scrolling of results. Use the TsSelect2 library for development only, not production for now.

Installation - NPM

npm i ts-select2

Installation - Browser

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/ts-select2.min.js"></script>

Usage

Add the following libraries to the page:

ts-select2.min.js

Add the following stylesheets from Select2 to the page:

select2.min.css

Initialisation

<select data-placeholder="Select something" multiple="multiple" class="form-control select-access-multiple-enable">
    <option value="AK">Alaska</option>
    <option value="CA">California</option>
    <option value="AZ" selected>Arizona</option>
    <option value="CO">Colorado</option>
    <option value="ID">Idaho</option>
    <option value="WY" selected>Wyoming</option>
    <option value="CT">Connecticut</option>
</select>

Example

To initialise the select, call TsSelect2 on the element:

const select2 = new TsSelect2(select, {minimumResultsForSearch: Infinity, width: `250px`});

/**
 * Opens the select
 */
select2.open();

/**
 * Closes the select.
 */
select2.close();

/**
 * Toggles the dropdown
 */
select2.toggleDropdown();

/**
 * Gets if the dropdown is enabled
 */
select2.isEnabled();

/**
 * Gets if the dropdown is disabled
 */
select2.isDisabled();

/**
 * Gets if the dropdown is opened
 */
select2.isOpen();

/**
 * Gets if the dropdown is focused
 */
select2.focus();

/**
 * Returns an array of data
 */
select2.data();

/**
 * Destroy the select.
 */
select2.destroy();

/**
 * Use one of the arguments: 'open', 'close', 'destroy'
 */
select2.select2('open');

Recommend Projects