Efficient Dual List Box Plugin with jQuery and Bootstrap

Just another jQuery & Bootstrap based dual list box plugin that is easy to implement and has the ability to load huge data from a JSON file using Ajax.

See also:

• jQuery Plugin For Drag and Drop Multi-Select List Box - fieldChooser
• Responsive jQuery Dual Select Boxes For Bootstrap - Bootstrap Dual Listbox

How to use it:

1. Include Twitter Bootstrap's CSS in the head section of the document.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

2. Include jQuery library together with Twitter Bootstrap's JS and Bootstrap Dual List Box plugin at the bottom.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="dist/dual-list-box.js"></script>

3. Create a multi-select elemenet for the dual list box widget and use Html5 data-source to define the data source.

<select multiple="multiple" data-source="data/1000.json"></select>

4. The data structure in the 1000.json should be like this:

[
  {
    "index": 0,
    "name": "Name 1",
    "company": "Company 1",
    "email": "[email protected]"
  },
  {
    "index": 1,
    "name": "Name 2",
    "company": "Company 2",
    "email": "[email protected]"
  },
  {
    "index": 2,
    "name": "Name 3",
    "company": "Company 3",
    "email": "[email protected]"
  },
  {
    "index": 3,
    "name": "Name 4",
    "company": "Company 4",
    "email": "[email protected]"
  },
  {
    "index": n,
    "name": "Name n",
    "company": "Company n",
    "email": "[email protected]"
  },
]

4. Initialize the plugin.

$('select').DualListBox();

5. Available options and defaults. All the options can be passed via Javascript object or Html5 data-OPTION attributes, as in data-source="data/1000.json";.

• element: Select element in which you want to create this dual list box.
• JSON: Whether to download the data via a JSON request.
• uri: JSON file that can be opened for the data.
• value: Value that is assigned to the value field in the option.
• text: Text that is assigned to the option field.
• title: Title of the dual list box.
• json: Whether to retrieve the data through JSON.
• timeout: Timeout for when a filter search is started.
• horizontal: Whether to layout the dual list box as horizontal or vertical.
• textLength: Maximum text length that is displayed in the select.
• moveAllBtn:: Whether the append all button is available.
• maxAllBtn: Maximum size of list in which the all button works without warning. 
• selectClass: Default CSS class of the select box.
• warning:: Warning message.

$('select').DualListBox({
  // defaults
  element:    $(this).context,
  uri:        'local.json', 
  value:      'id',
  text:       'name',
  title:      'Example', 
  json:       true,
  timeout:    500, 
  horizontal: false,
  textLength: 45, 
  moveAllBtn: true,
  maxAllBtn:  500, 
  selectClass:'form-control',
  warning:    'Are you sure you want to move this many items? Doing so can cause your browser to become unresponsive.'
});

---

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