# MultiSelect5 --- Bootstrap 5 Multiselect Plugin

MultiSelect5 is a lightweight, high-performance Bootstrap 5 multiselect
dropdown plugin built using jQuery.

It provides searchable multi-selection, tagging UI, AJAX data loading,
form binding compatible with Spring Boot, and a clean public API.

------------------------------------------------------------------------

## ✨ Features

-   Bootstrap 5 native styling
-   Multiple selection with tags
-   Searchable dropdown
-   Select All / Clear options
-   AJAX data loading
-   Virtual scrolling support
-   Form submission compatible (hidden input binding)
-   Public API methods
-   Event system
-   Lightweight & dependency minimal
-   Enterprise-ready architecture (V5)

------------------------------------------------------------------------

## 📦 Requirements

-   jQuery 3.6+
-   Bootstrap 5

``` html
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="multiselect5.js"></script>
```

------------------------------------------------------------------------

## 🚀 Basic Usage

### HTML

``` html
<select id="ddlUsers" name="userIds" multiple></select>
```

### Initialize

``` javascript
$('#ddlUsers').multiSelect5({
    placeholder: "Select users"
});
```

------------------------------------------------------------------------

## 📊 Data Format

MultiSelect5 expects:

``` javascript
[
  { id: 1, name: "John" },
  { id: 2, name: "David" },
  { id: 3, name: "Priya" }
]
```

Required fields:

  Field   Required
  ------- ----------
  id      Yes
  name    Yes

------------------------------------------------------------------------

## ⚙️ Configuration Options

  Option              Type       Default       Description
  ------------------- ---------- ------------- -------------------------
  placeholder         string     "Select..."   Input placeholder
  searchable          boolean    true          Enables search
  selectAll           boolean    true          Show Select All / Clear
  data                array      null          Static data
  ajax                function   null          Remote loader
  virtualScroll       boolean    true          Virtual rendering
  pageSize            number     30            Items rendered
  dropdownMaxHeight   number     260           Dropdown height
  fieldName           string     auto          Hidden input name
  events              object     {}            Event callbacks

------------------------------------------------------------------------

## 📥 Static Data Example

``` javascript
$('#ddlUsers').multiSelect5({
    data: [
        { id: 1, name: "John" },
        { id: 2, name: "Mary" }
    ]
});
```

------------------------------------------------------------------------

## 🌐 AJAX Data Loading

``` javascript
$('#ddlUsers').multiSelect5({
    ajax: function(searchTerm, callback){
        $.get('/api/users', { q: searchTerm }, function(res){
            callback(res);
        });
    }
});
```

------------------------------------------------------------------------

## 🧾 Form Submission

Automatically generates hidden input.

Example:

    userIds=1,3,5

Spring Boot:

``` java
@RequestParam String userIds;
```

------------------------------------------------------------------------

## 🎯 Events

``` javascript
$('#ddlUsers').multiSelect5({
    events:{
        open:(d,i)=>console.log("opened"),
        close:(d,i)=>console.log("closed"),
        change:(values)=>console.log(values)
    }
});
```

Available events:

  Event    Description
  -------- -------------------
  open     Dropdown opened
  close    Dropdown closed
  change   Selection changed

------------------------------------------------------------------------

## 🧠 Public API

Get instance:

``` javascript
const ms = $('#ddlUsers').getMultiSelect5();
```

### Get Values

``` javascript
ms.getValue();
```

### Set Values

``` javascript
ms.setValue([1,5,7]);
```

### Clear

``` javascript
ms.clear();
```

### Reload Data

``` javascript
ms.reload([{id:10,name:"New"}]);
```

### Destroy

``` javascript
ms.destroy();
```

### Enable

``` javascript
ms.enable();
```

### Disable

``` javascript
ms.disable();
```
### Using config to disable the MultiSelect
$('#ddlUsers').multiSelect5({
    disabled:true
});

------------------------------------------------------------------------

## 🔧 Manipulating via jQuery

``` javascript
const ms = $('#ddlUsers').getMultiSelect5();

ms.setValue([2,4]);
ms.clear();
console.log(ms.getValue());
```

------------------------------------------------------------------------

## 🔄 Form Reset Support

Native reset supported:

``` html
<form>
   ...
   <button type="reset">Reset</button>
</form>
```

------------------------------------------------------------------------

## 🎨 Styling Classes

  Class          Purpose
  -------------- ---------------
  ms5            Container
  ms5-control    Input wrapper
  ms5-dropdown   Dropdown
  ms5-list       Options list
  ms5-row        Item row
  ms5-tag        Selected tag

------------------------------------------------------------------------

## 🏗 Architecture (V5)

-   State Engine
-   UI Renderer
-   Data Engine
-   Event Bus
-   Public API Layer

------------------------------------------------------------------------

## ⚡ Performance Tips

``` javascript
virtualScroll:true,
pageSize:50
```

Use AJAX for large datasets.

------------------------------------------------------------------------

## 🧩 Complete Example

``` javascript
$('#ddlCities').multiSelect5({
    placeholder:"Select Cities",
    data:cities,
    events:{
        change:(values)=>{
            console.log("Selected:",values);
        }
    }
});
```

------------------------------------------------------------------------

## 📜 License

Copyright (c) 2026\
OVID Technologies Pvt Ltd, Visakhapatnam

This software is proprietary and confidential.

------------------------------------------------------------------------

## 👨‍💻 Author

OVID Technologies Pvt Ltd\
https://ovid.in