Dynamic Multi Select Panel Plugin - jQuery TvMultiSelectPanel

TvMultiSelectPanel is a jQuery plugin to dynamically render a multi select panel where the users are able to select single or multiple entries in an elegant way.

More features:

• Select all and unselect all.
• Live search.
• Preview mode.
• Supports JSON data.
• Allows to check a group of entries with checkboxes.

How to use it:

1. Insert jQuery library and the jQuery TvMultiSelectPanel plugin's JavaScript & Stylesheet into the document.

<link rel="stylesheet" href="TvMultiSelectPanel.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="TvMultiSelectPanel.min.js"></script>

2. Create a container to hold the multi select panel.

<div id="data" class="tv-select-panel">
  
</div>

3. Define the data in the JavaScript (JSON) as follows:

let source = [
    {"key": 1, "value": "thành"},
    {"key": 2, "value": "Kris"},
    {"key": 3, "value": "Pierette"},
    {"key": 4, "value": "Enos"},
    {"key": 5, "value": "Ezekiel"},
    {"key": 6, "value": "Burg"},
    {"key": 7, "value": "Alvinia"},
    {"key": 8, "value": "Giana"},
    {"key": 9, "value": "Phaidra"},
    {"key": 10, "value": "Maryanna"}
]

4. Render the data in the multi select panel. Done.

var result = $('#data').panelMultiSelect({
    dataSource: source
});

5. Get the selected data.

result.getSelectedResult();

6. Default customization options.

var result = $('#data').panelMultiSelect({
    keyAttributeName: 'key',
    valueAttributeName: 'value',
    dataSource: [],
    customValueCallBackFunc: null,
    customKeyCallBackFunc: null,
    elementClassName: 'tv-select-element',
    elementShowClassName: 'tv-select-element_show',
    selectPanelContentWrapperClassName: 'tv-select-panel-content-wrapper',
    selectedElementCss: {color: 'white', background: '#6F9301', border: ''},
    notSelectedElementCss: {color: 'black', background: 'white', border: ''},
    selectedCountColor: '#608001',
    selectedElementStyle: 'color: white; background: #6F9301; border: ',
    notSelectedElementStyle: 'color: black; background: white; border: ',
    checkboxClassName: 'tv-check-box-element',
    checkboxDivWrapperClassName: 'tv-check-box-wrapper',
    checkboxDivWrapperWidth: '25',
    tvSelectFooterClassName: 'tv-select-footer',
    tvSelectHeaderClassName: 'tv-select-header'
});

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