Responsive Multiple Selection Combo Box using Bootstrap 3

MagicSuggest is an easy-to-use jQuery plugin for creating a combo menu that allows you to select multiple items from a dropdown list with typing and auto-complete support.

More Features:

Responsive Design.
Compatible with Bootstrap 3 and Bootstrap 4 frameworks.
Dynamic data upload via AJAX.
Custom query parameter.
Sort and filter data.
Complex templates.
Tons of configuration options.

Must Read: jQuery Plugin Allows Multiple Selections of Checkbox Inputs

How to make use of it:

1. Load the jQuery MagicSuggest plugin’s CSS and Bootstrap’s stylesheet.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link href="magicsuggest.css" rel="stylesheet" />

2. Create an empty container to generate the combo list.

<div id="example" class="form-control"></div>

3. Load the jQuery or JavaScript library and the MagicSuggest plugin.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="magicsuggest.js"></script>

4. Prepare your JSON data used to the combo field.

var myData = ['New York','Los Angeles','Chicago', ...]

5. Initialize the jQuery MagicSuggest plugin and the combo list with your data.

$(function() {
  var instance = $('#example').magicSuggest({
    data: myData
  });
});

6. Customize the template.

$(function() {
  var instance = $('#example').magicSuggest({
    data: myData,
    renderer: function(data){
      return '<div style="padding: 5px; overflow:hidden;">' +
          '<div style="float: left;"><img src="' + data.picture + '" /></div>' +
          '<div style="float: left; margin-left: 5px">' +
              '<div style="font-weight: bold; color: #333; font-size: 10px; line-height: 11px">' + data.name + '</div>' +
              '<div style="color: #999; font-size: 9px">' + data.email + '</div>' +
          '</div>' +
      '</div><div style="clear:both;"></div>'; // make sure we have closed our dom stuff
    }
  });
});