mobius1-selectr

What is mobius1-selectr?

The mobius1-selectr npm package is a lightweight, dependency-free JavaScript library for creating customizable and feature-rich select boxes. It provides a variety of functionalities to enhance the user experience with dropdowns, including multi-select, search, and custom styling.

What are mobius1-selectr's main functionalities?

Basic Initialization

This code initializes a basic Selectr instance on a select element with the ID 'mySelect'.

const selectr = new Selectr('#mySelect');

Multi-Select

This code initializes a Selectr instance that allows multiple selections.

const selectr = new Selectr('#mySelect', { multiple: true });

Searchable Dropdown

This code initializes a Selectr instance with a search input to filter options.

const selectr = new Selectr('#mySelect', { searchable: true });

Custom Styling

This code initializes a Selectr instance with a custom CSS class for styling.

const selectr = new Selectr('#mySelect', { customClass: 'my-custom-class' });

Option Groups

This code initializes a Selectr instance with grouped options.

const selectr = new Selectr('#mySelect', { data: [{ text: 'Group 1', children: [{ value: '1', text: 'Option 1' }, { value: '2', text: 'Option 2' }] }, { text: 'Group 2', children: [{ value: '3', text: 'Option 3' }, { value: '4', text: 'Option 4' }] }] });

Other packages similar to mobius1-selectr

select2

Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Compared to mobius1-selectr, Select2 is more feature-rich but also heavier due to its jQuery dependency.

chosen-js

Chosen is a JavaScript plugin that makes long, unwieldy select boxes more user-friendly. It supports both single and multi-select options with search functionality. Chosen is similar to mobius1-selectr but has a more classic design and requires jQuery.

selectize

Selectize is a hybrid of a textbox and a select box. It offers tagging, remote data binding, and dynamic dropdowns. Selectize is more versatile than mobius1-selectr but also more complex to configure.

react-select

React-Select is a flexible and customizable select input control for React. It supports multi-select, async options, and custom styling. React-Select is specifically designed for React applications, making it different from the vanilla JavaScript approach of mobius1-selectr.

README

Selectr

A lightweight dependency-free select box replacement written in vanilla javascript. 2.8kb minified and gzipped.

Features:

• Supports single and multiple select boxes
• Supports optgroups
• Tagging support
• Searchable options
• Ajax options
• Custom events
• Custom styling
• Much more...

Selectr is so feature-packed that it needs it's own documentation site so why not head over there now - Demos & Documentation

Changelog

v1.0.5

• Pagination option added for large datasets when using options.data
• Fixed bug that caused a problem with deselecting programmatically set value (needed to be clicked twice to deselect)
• Various bug fixes

v1.0.4

• render option deprecated and replaced with renderOption (see docs)
• add option renderSelection (see docs)