Modern Custom Select Plugin Styled with Tailwind CSS - jQuery IO Select

IO Select is a lightweight jQuery custom select plugin that transforms the regular select element into a searchable tags input styled with Tailwind CSS.

Features:

• Multiple selection (displays as tags)
• Dark mode
• Accessibility (ARIA attributes, keyboard navigation)
• Mobile-friendly

How to use it:

1. Install and import IO Select into your jQuery project.

# NPM
$ npm install io-select

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

2. Or load the 'io-select.js' script directly into your document which has jQuery and TailwindCSS installed.

<!-- Required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<!-- jQuery IO Select -->
<script src="/path/to/dist/io-select.js"></script>

3. Initialize the plugin on the existing select element:

<select id="mySelect">
  <option value=""></option>
  <option value="1">JavaScript</option>
  <option value="2">HTML5</option>
  <option value="3">CSS3</option>
  ...
</select>

<select id="mySelect" multiple>
  <option value=""></option>
  <option value="1">JavaScript</option>
  <option value="2">HTML5</option>
  <option value="3">CSS3</option>
  ...
</select>

$(function(){ 
  $('#mySelect').ioSelect();
});

4. All possible plugin options:

• placeholder: Text displayed when no selection is made
• searchPlaceholder: Placeholder text for the search input
• noResultsText: Text displayed when no search results are found
• searchable: Enable/disable search functionality
• ajax: { url: '', method: 'GET', dataKey: 'results', queryParam: 'q' }
• initialSelected: { id: '', name: '' } veya [{ id: '', name: '' }]

$('#mySelect').ioSelect({
  placeholder: 'Make a selection',
  searchPlaceholder: 'Search...',
  noResultsText: 'No results found',
  searchable: true,
  ajax: null,
  initialSelected: null
});

5. Destroy the IO Select instance and revert to the original select:

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

How It Works:

When you initialize it on a select, the original <select> element is hidden, and a new DOM structure is created to represent the custom select. This new structure is styled using Tailwind CSS classes.

The plugin reads the <option> tags from your original select to populate its custom dropdown. For multiple selects, selected items are displayed as "tags" or "tokens" in the selection area, each with a small '×' button for removal.

Changelog:

v1.0.4 (2025-06-19)

• 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

2025-06-13

• Added a check to prevent re-initialization of the select element if it has already been initialized.
• Removed the initialization flag upon showing the select element to ensure proper state management.

---

This awesome jQuery plugin is developed by ismailocal. For more Advanced Usages, please check the demo page or visit the official website.