io-select

IO Select

A modern and customizable jQuery select plugin. Styled with Tailwind CSS, featuring search functionality and multiple selection support.

Current Version: 1.0.3

What's New (v1.0.3)

• 🚀 Dynamic search and option support with AJAX
• 🏷️ initialSelected: Set initially selected values via JS (single & multiple, AJAX supported)
• ⏳ Debounce: Prevents unnecessary AJAX requests during search
• 📌 Sticky Search: Sticky dropdown search box
• 🔄 Loading/No Results UX: "Loading..." during AJAX and "No results found" messages
• ❌ Clear with X: Easy selection clearing in single/multiple select
• 🐞 Multiple bugfixes and UX improvements

Demo

Check out the live demo here: https://ismailocal.github.io/io-select/examples/index.html

Features

• 🎨 Modern and responsive design
• 🔍 Search functionality
• ✨ Multiple selection support
• 🌙 Dark mode support
• ♿ Accessibility support
• 🎯 Easy integration
• 📱 Mobile friendly
• ❌ Deselection support for single select
• 🔄 Keyboard navigation

Installation

Install via npm:

npm install io-select

Usage

HTML:

<!-- Basic Usage -->
<select id="basicSelect">
  <option value=""></option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<!-- Multiple Selection -->
<select id="multiSelect" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

JavaScript:

import 'io-select';
import $ from 'jquery';

// Basic usage
$('#basicSelect').ioSelect();

// With custom options
$('#multiSelect').ioSelect({
  placeholder: 'Make a selection',
  searchPlaceholder: 'Search...',
  noResultsText: 'No results found',
  searchable: true
});

Settings

Setting	Type	Default	Description
placeholder	string	'Make a selection'	Text to display when no selection is made
searchPlaceholder	string	'Search...'	Placeholder text for the search input
noResultsText	string	'No results found'	Text to display when no search results are found
searchable	boolean	true	Enable/disable search functionality

Methods

destroy

Reverts the select element to its original state:

$('#mySelect').ioSelect('destroy');

Keyboard Navigation

• Enter or Space: Open/close dropdown
• Escape: Close dropdown
• Tab: Navigate through elements

Accessibility

IO Select is built with accessibility in mind:

• ARIA attributes for screen readers
• Keyboard navigation support
• Focus management
• Screen reader friendly markup

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

Development

• Clone the repository
• Install dependencies: npm install
• Start development server: npm run dev
• Build: npm run build

License

MIT