title: Use AJAX in ng2-select2
body: <p>I have many drop-downs in my angular2js project. I am using <a href="https://github.com/NejcZdovc/ng2-select2" rel="nofollow noreferrer">ng2-select2</a> for these drop-down. In some dropdown, I need to filter and fetch data from an API as per the string user types into the select2 search box. The plug-in initializes but doesn't fire any AJAX.</p>
  
  <p>My code so far: </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;select2 [data]="options | async"&gt;&lt;/select2&gt;
  </code></pre>
  
  <p>Component: </p>
  
  <pre><code>import { Component,OnInit  } from '@angular/core';
  import {Select2OptionData} from 'ng2-select2';
  import {AlertService, LTJService} from '../../_services/index';
  import { Observable } from 'rxjs/Observable';
  
  @Component({
      selector: 'nationalities',
      templateUrl: '../../views/buyer_profile/nationalities.component.html',
  })
  
  export class NationalityComponent implements OnInit {
      //public nationalities: Observable&lt;Array&lt;Select2OptionData&gt;&gt;;
      public options: Select2Options;
      public ajaxOptions: Select2AjaxOptions;
  
  
      constructor(private alertService: AlertService, private ltjService: LTJService) {
      }
  
      ngOnInit(): void {
          console.log('In ngOnInit');
  
          this.ajaxOptions = {
              url: '&lt;API URL&gt;',
              dataType: 'json',
              delay: 250,
              cache: false,
              data: (params: any) =&gt; {
                  console.log("AA", params);
                  return {
                      query: params.term,
                      gotoPage: params.page
                  }
              },
              processResults: (data: any, params: any) =&gt; {
                  params.page = params.page || 1;
                  console.log('data: ', data);
                  return {
                      results: $.map(data.data, function(obj) {
                          return {id: obj.id, text: obj.name};
                      }),
                      pagination: {
                          more: (params.page * 10) &lt; data.objectValue.total_count
                      }
                  };
              },
          };
  
          this.options = {
              ajax: this.ajaxOptions
          }
      } 
  }
  </code></pre>
  
  <p>Can anyone point me into the right direction?
  Any help is really appreciated.</p>