Untitled

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 2 Select2 Dropdown</title>
    <!-- 1. Load libraries -->
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="select2@*" data-semver="4.0.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" />
    <script data-require="select2@*" data-semver="4.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
    </script>
    <!-- 3. Bootstrap -->
    <script>
      System.import('angular2/platform/browser').then(function(ng){
        System.import('src/select2-dropdown').then(function(src) {
          ng.bootstrap(src.Select2Dropdown);
        });
      });
    </script>
  </head>

  <!-- 4. Display the application -->
  <body>
    <select2-dropdown>Loading...</select2-dropdown>
  </body>

</html>

import {Component, OnInit} from 'angular2/core';
import {DummySelect} from './dummyselect'

@Component({
  selector: 'select2-dropdown',
  templateUrl: 'src/select2-dropdown.html'
})

export class Select2Dropdown implements OnInit {
  
  private gitRepDropdown: DummySelect;
  private selValues: string[];
  
  ngOnInit(){
    this.gitRepDropdown = new DummySelect("#repdropdown");
  }
  
  getSelValues(): void {
    this.selValues = this.gitRepDropdown.getSelectedValues("#repdropdown");
  }
}

<div>
  <h1> Multi select dropdown with Ajax request</h1>
  
  <h3>Selected Values : {{selValues}} </h3>
  <select id="repdropdown" multiple="multiple">
    <option *ngFor="#repo of items" value="{{repo.id}}">
      {{rep.full_name}}
    </option>
  </select>
  <div style="padding-top:10px">
    <button id="button" (click)="getSelValues()">Get Values</button>
  </div>
</div>

export class DummySelect {
  constructor(private id: string){
    $(id).select2({
      width: '100%',
      ajax: {
        url: 'https://api.github.com/search/repositories',
        datatype: 'json',
        delay: 250,
        data: function(params: any){
          return {
            q: params.term
          };
        },
        processResults: function(data:any, params: any){
          return {
            results:
              data.items.map(function(item) {
                return {
                  id: item.id,
                  text: item.full_name
                };
              }
            )};
          },
        cache: true  
      },
      placeHolder: 'Search...',
      minimumInputLength: 2 
    })
  }
  
  getSelectedValues(private id: string){
    return $(id).val();
  }
}