$('#search').select2({
  ajax: {
    url: 'https://www.crazycopenhagen.dk/ingredient.search.php',
    dataType: 'json',
    delay: 250,
    data: function (params) {
    console.log(params);
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;
      // console.log(data+' '+params);
      
      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  multiple: true,
  allowClear: true,
placeholder: 'Du kan søge efter ingredienser og opskrifter',
language: {
    inputTooShort: function(args) {
      // args.minimum is the minimum required length
      // args.input is the user-typed text
      return '<i class="fa fa-share degrees90" aria-hidden="true"></i> <span class="search_explanation">Søg ved at indtaste navnet på en ingrediens eller en opskrift</span>';
    },
    inputTooLong: function(args) {
      // args.maximum is the maximum allowed length
      // args.input is the user-typed text
      return 'Du har indtastet for meget';
    },
    errorLoading: function() {
      return 'fejl ved hentning af resultater';
    },
    loadingMore: function() {
      return 'Henter flere resultater';
    },
    noResults: function() {
      return 'Der blev ikke fundet nogen resultater';
    },
    searching: function() {
      return 'Søger, vent venligst...';
    },
    maximumSelected: function(args) {
      // args.maximum is the maximum number of items the user may select
      return 'fejl ved hentning af resultater';
    }
  },
  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
  minimumInputLength: 2,
  templateResult: formatRepo, // omitted for brevity, see the source of this page
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});

function formatRepo (repo) {
  if (repo.loading) return repo.text;
 //  console.log(repo);
  var markup = '<div class=\"select2-result-repository clearfix\">' +
    // '<div class=\"select2-result-repository__avatar\"><img src=\"' + repo.owner.avatar_url + '\" /></div>'+
    '<div class=\"select2-result-repository__meta\">' +
      '<div class=\"select2-result-repository__title\">' + repo.text + '</div>';

  if (repo.description) {
    markup += '<div class=\"select2-result-repository__description\">' + repo.description + '</div>';
  }

  // markup += '<div class=\"select2-result-repository__statistics\">' +
    // '<div class=\"select2-result-repository__forks\"><i class=\"fa fa-flash\"></i> ' + repo.forks_count + ' Forks</div>' +
    // '<div class=\"select2-result-repository__stargazers\"><i class=\"fa fa-star\"></i> ' + repo.stargazers_count + ' Stars</div>' +
    // '<div class=\"select2-result-repository__watchers\"><i class=\"fa fa-eye\"></i> ' + repo.watchers_count + ' Watchers</div>' +
  // '</div>' +
  '</div></div>';

  return markup;
}

function formatRepoSelection (repo) {
  return repo.text;
}

$($('#search').data('select2').$container).addClass('search-container');