Select 2 example

by Matthew

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select multiple="true">
    <option value="0" selected>Option 1</option>
    <option value="1">Option 2</option>
</select>

CSS

select {
  width:100%;
}

JavaScript

function filterResult(opt){
  console.log(opt);
	if(opt.selected){
  	 return null;
  }
	 return opt.text;
}

function formatLink (opt) {
  if (!opt.id) {
    return opt.text;
  }
 
 var $opt = $(
    '<span>' + opt.text + '(' + opt.element.value + ')</span>  '
  );
  
  var $req = $.ajax({url:'/echo/js/?js=' + opt.id});
  $req.done(function(data){
    var a = $(document.createElement("a"));
    $(a).click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        window.open(a.data('url'));
    });
    a.text("view");
    a.attr({'href':"#", "data-url":"http://google.com"});
  	return $opt.append(" - ").append(a);
  });
 return $opt;
}


$("select").select2({
  templateSelection: formatLink,
  templateResult: filterResult,
  minimumResultsForSearch: 1,
  closeOnSelect: true,
  noMatches: function (term) {
    return "No additional documents found";
  }
});

$("select").on('select2:selecting', function (e) {
  console.log(e);
});