Groupable & Searchable Dual Listbox Plugin - jQuery Transfer

Groupable & Searchable Dual Listbox Plugin - jQuery Transfer
File Size: 46.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Transfer is a powerful, dynamic, groupable & searchable Dual Listbox plugin where the users are able to move groups and items between 2 side-by-side list boxes

How to use it:

1. Include the iconic font and Transfer's stylesheet in the header of the document.

<link rel="stylesheet" href="icon_font/css/icon_font.css">
<link rel="stylesheet" href="css/jquery.transfer.css">

2. Create a placeholder element for the dual list box.

<div class="transfer"></div>

3. Include jQuery library and the Transfer's JavaScript at the end of the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/jquery.transfer.js"></script>

4. Add grouped options to the dual listbox.

var languages = [
    {
        "language": "jQuery",
        "value": 122
    },
    {
        "language": "AngularJS",
        "value": 132
    },
    {
        "language": "ReactJS",
        "value": 422
    },
    {
        "language": "VueJS",
        "value": 232
    },
    {
        "language": "JavaScript",
        "value": 765
    },
    {
        "language": "Java",
        "value": 876
    },
    {
        "language": "Python",
        "value": 453
    },
    {
        "language": "TypeScript",
        "value": 125
    },
    {
        "language": "PHP",
        "value": 633
    },
    {
        "language": "Ruby on Rails",
        "value": 832
    }
];

var groupData = [
    {
        "groupName": "JavaScript",
        "groupData": [
            {
                "language": "jQuery",
                "value": 122
            },
            {
                "language": "AngularJS",
                "value": 643
            },
            {
                "language": "ReactJS",
                "value": 422
            },
            {
                "language": "VueJS",
                "value": 622
            }
        ]
    },
    {
        "groupName": "Popular",
        "groupData": [
            {
                "language": "JavaScript",
                "value": 132
            },
            {
                "language": "Java",
                "value": 112
            },
            {
                "language": "Python",
                "value": 124
            },
            {
                "language": "TypeScript",
                "value": 121
            },
            {
                "language": "PHP",
                "value": 432
            },
            {
                "language": "Ruby on Rails",
                "value": 421
            }
        ]
    }
];

5. Initialize the plugin to activate the dual list box.

var settings = {
    "inputId": "languageInput",
    "data": languages,
    "groupData": groupData,
    "itemName": "language",
    "groupItemName": "groupName",
    "groupListName" : "groupData",
    "container": "transfer",
    "valueName": "value",
    "callable" : function (data, names) {
      console.log("Selected ID:" + data)
    }
};

Transfer.transfer(settings);

Changelog:

2018-08-27

  • case sensitivity

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