Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>  
</head>
<body>
   Selections:
  <select style="width:200px" id="example1">
  </select>
</body>
</html>
 
$(document).ready(function() {
    $('#example1').select2({
     tags: true,
     ajax: {
                url: 'https://jsonplaceholder.typicode.com/users/',
               dataType: 'json',
                type: "GET",
                processResults: function (data) {
                    return {
                        results: $.map(data, function (obj) {
                            return { id: obj.id, text: obj.name };
                        })
                    };
                }
      },
      placeholder: "",
      selectOnClose: true,
      allowClear: true,
      minimumInputLength: 1,
 
      
    });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers