SwiftSelect

SwiftSelect is a customizable plugin to enhance select elements with support for multi-selection, searching, custom events, and keyboard navigation.

Installation

Install via npm:

npm install swift-select

Usage

Initialization

To initialize SwiftSelect, pass in the wrapper element, options array, and (optionally) settings and events.

import SwiftSelect from 'swift-select';

const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' }
];

const settings = {
  multiple: true,             // Enables multi-selection
  searchable: true,           // Adds a search input field
  placeholder: 'Select...',   // Placeholder text
};

const events = {
  onSelectChange: (value) => {
    console.log('Selected value:', value);
  }
};

// Initialization
const selectWrapper = document.querySelector('#select-wrapper');
const swiftSelect = new SwiftSelect(selectWrapper, options, settings, events);

HTML Structure

Ensure the element you want to transform into a select has a wrapper:

<div id="select-wrapper"></div>

Options

SwiftSelect supports the following settings:

Option	Type	Description	Default
multiple	Boolean	If set to true, allows selecting multiple options. If set to false, only a single option can be selected.	false
searchable	Boolean	If set to true, adds a search input field in the dropdown, allowing users to filter options by typing.	false
placeholder	String	Placeholder text displayed when no option is selected. This provides guidance for the user on what to do.	'Select an option'
withDefaultOption	Boolean	If set to true, displays a default option when the dropdown is opened. Useful for prompting user action.	false
selectVisibleOptions	Number	Determines how many options are visible in the dropdown at a time. This helps manage space and usability.	7
searchPlaceholder	String	Placeholder text for the search input field. This informs users what they can enter in the search box.	'Search...'
searchNotFoundText	String	Text displayed when no options match the search query. This provides feedback to users when their search yields no results.	'Not found'
searchDefaultOption	String	A specific option value that should always be visible in the dropdown, even if it doesn't match the search query.	null
disabled	Boolean	If set to true, disables the select component, preventing user interaction. Useful for managing form states.	false

Events

You can hook into different events by passing an events object during initialization. For example:

• onSelectChange: Triggered when an option is selected or deselected.

const events = {
  onSelectChange: (value) => {
    console.log('Current selected value:', value);
  }
};

License

This project is licensed under the MIT License. See the LICENSE file for details.