Fancy Dynamic Multiple Select Plugin For Bootstrap 4 - paraia-multi-select

A jQuery & Bootstrap 4 multi select plugin which transforms a normal input field into a flexible, dynamic, filterable multi-select dropdown for convenient tags/tokens/options selection.

How to use it:

1. Load Bootstrap 4 framework's stylesheet and the paraia_multi_select.min.css in the head section of the document.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="dist/css/paraia_multi_select.min.css">

2. Create a standard input field on the page.

<input type="text" 
       class="form-control"
       name="brands"
       data-paraia-multi-select="true"
       placeholder="Select a brand">

3. Define an array of item objects to select.

var items = [
    {value: 11, text: 'Apple'},
    {value: 12, text: 'Nokia'},
    {value: 13, text: 'Sony'},
    {value: 14, text: 'LG'},
    {value: 15, text: 'HTC'},
    {value: 16, text: 'Motorola'},
    {value: 17, text: 'Samsung'},
    {value: 18, text: 'ZTE'},
    {value: 19, text: 'Asus'},
    {value: 20, text: 'Alcatel'}
];

4. Initialize the plugin on the input field and done.

var select = $('[data-paraia-multi-select="true"]').paraia_multi_select({
    // options here
});

5. To customize the multiple select interface, pass the following options object to the paraia_multi_select method.

var select = $('[data-paraia-multi-select="true"]').paraia_multi_select({

    // enable multi select
    multi_select: true,
    
    // selected items on init
    defaults: [],

    // filter text
    filter_text: 'Filter',

    // is Right To Left?
    rtl: false,

    // is case sensitive?
    case_sensitive: false
    
});

6. Get the selected items.

select.paraia_multi_select('get_items')

Changelog:

2018-08-12

• Fixed RTL mode.

---

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