Flexible Multiselect Plugin with Live Search - jQuery Scroll Multi-Select

Scroll Multi-Select Plugin is a lightweight jQuery plugin that helps you create dynamic, interactive multi-select dropdowns with live search support.

Features:

• Search Functionality: Real-time filtering of items based on user input
• Flexible Selection: Click checkboxes or entire rows to toggle selections
• Dynamic Updates: Modify item lists programmatically after initialization
• Responsive Design: Adapts to different screen sizes and devices
• Customizable Styling: Override default styles to match project themes
• Comprehensive API: Get, set, and manipulate selections through JavaScript methods
• Selected Item Preview: Display chosen items with configurable preview limits
• Clear All Function: Bulk deselection with a single action

Use Cases:

• Admin Dashboards: Managing user permissions, role assignments, or feature toggles where administrators need to select multiple options from extensive lists
• E-commerce Filters: Product filtering interfaces where customers can select multiple categories, brands, or attributes simultaneously
• Form Builders: Creating dynamic forms that require multiple selections from categories, tags, or related items
• Data Management Tools: Bulk operations interfaces where users need to select multiple records for processing, export, or batch updates

How To Use It:

1. Download the plugin and add the following files to your webpage.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Scroll Multi-Select Plugin -->
<link rel="stylesheet" href="css/jquery-multiselect.css">
<script src="js/jquery-multiselect.js"></script>

2. Create an empty container element where the multi-select dropdown will be rendered.

<div id="my-container"></div>

3. Initialize the plugin on the container element and define your options in an rray of objects with id, label, and value properties.

$('#example').scrollMultiSelect({
  items: [
    { id: 1, label: 'Option 1', value: 'option1' },
    { id: 2, label: 'Option 2', value: 'option2' },
    // ...
  ],
});

4. Available options to customize the plugin.

• placeholder: The text displayed when no items are selected.
• searchPlaceholder: The placeholder text for the search input field.
• maxHeight: The maximum height of the item list before a scrollbar appears.
• showSelectedPreview: A boolean (true/false) to show tags of selected items below the header.
• maxPreviewItems: The number of selected item tags to show before displaying a "+X more" message.
• onSelectionChange: A callback function that fires whenever the selection is modified. It receives an array of the currently selected values.

$('#example').scrollMultiSelect({
  items: [],
  placeholder: 'Select items...',
  searchPlaceholder: 'Search...',
  maxHeight: '300px',
  showSelectedPreview: true,
  maxPreviewItems: 3,
  onSelectionChange: function () { }
});

5. API methods.

// Get currently selected values
var selected = $('#example').scrollMultiSelect('getSelectedValues');

// Set selected values programmatically
$('#example').scrollMultiSelect('setSelectedValues', ['option1', 'option3']);

// Update the items list
var newItems = [
    { id: 3, label: 'New Option', value: 'new-option' }
];
$('#example').scrollMultiSelect('updateItems', newItems);

// Destroy the plugin instance
$('#example').scrollMultiSelect('destroy');

Alternatives

• Select2: This is the heavyweight champion of select box replacement libraries. It's incredibly powerful, with support for remote data sources, infinite scrolling, complex theming, and much more. The downside is its size. If you don't need all those features, Select2 can be overkill.
• Choices.js: A modern, vanilla JavaScript plugin with zero dependencies. It's lightweight, fast, and has a clean API. I'd recommend this if your project isn't already dependent on jQuery.
• 10 Best Multiple Select Plugins In JavaScript

FAQs

Q: How do I load items dynamically using AJAX?
A: Initialize the plugin with an empty items array. In your AJAX call's success handler, use the updateItems API method to populate the component with the data you fetched from the server.

Q: Can I customize the styling beyond the basic options?
A: Yes. The plugin generates semantic CSS classes like .multi-select, .multi-select-item, and .selected-tag. You can write your own CSS to override the default styles and match your site's theme. Just make sure your stylesheet is loaded after the plugin's CSS.

Q: What is the performance like with very large datasets?
A: The search is client-side, so it filters a JavaScript array in the browser. It will be very fast for hundreds of items. If you load several thousand items, you might start to feel a slight input lag during search.

Q: Does the plugin work with dynamically created elements?
A: Initialize the plugin after creating the DOM element. If you're adding elements dynamically, call the plugin initialization in the same function or callback that creates the element.

Changelog:

2025-06-26

• Some improvements

---

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