Select2 Ajax无法选择从API提取的选项

Question

I'm trying to use the data in my API to populate a select input. I'm using Select2 and have everything working but am unable to select anything once results are found. I'll post my code below, I've been working on this for over 12 hours and can't find anything on the internet that works or even helps to get closer.

HTML:

<select id="school_input"></select>

Select2 Setup:

function formatResults (results) {
    if (results.loading) return "Searching...";
    var markup = "<div class='select2-result'>" + results.school_name + "</div>";
    return markup;
}

$('#school_input').select2({
  ajax: {
    url: "http://services.url.com/services/globalopponentlookup.ashx",
    dataType: 'jsonp',
    delay: 250,
    data: function (params) {
      return {
        school_name: params.term, 
      };
    },
    processResults: function (data, params) {
      return {
        results: data.schools,
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 3,
  templateResult: formatResults
});

Example of data being pulled in from API:

jQuery31101273177236076506_1487863085363({
  "schools": [
    {
      "school_search_keywords": "florida",
      "website": "http://www.cf.edu/",
      "school_id": "1514",
      "school_name": "Central Florida Community College",
      "school_website": "http://www.cf.edu/",
      "school_location": "Ocala, FL ",
      "school_mascot": "Patriots",
      "school_logo_file": "CFpats.png",
      "conference_id": "155",
      "school_last_updated": "2/26/2014 9:23:51 AM",
      "school_zip": "34474",
      "school_ncaa_code": "0",
      "school_abbrev": null,
      "logo": "http://clients.url.com/files/logos/njcaa/CFpats.png",
      "colors_id": null,
      "url": null,
      "safe_text_white": null,
      "safe_text_black": null,
      "primary_background": null,
      "primary_text": null,
      "secondary_background": null,
      "secondary_text": null,
      "client_id": null,
      "created": null,
      "deleted": null
    },
    {
      "school_search_keywords": "florida",
      "website": "http://www.easternflorida.edu/athletics/",
      "school_id": "2521",
      "school_name": "Eastern Florida State College",
      "school_website": "http://www.easternflorida.edu/athletics/",
      "school_location": "Cocoa, FL",
      "school_mascot": "Titans",
      "school_logo_file": "Eastern-Florida-State.png",
      "conference_id": "155",
      "school_last_updated": "1/19/2016 4:03:58 PM",
      "school_zip": "32922",
      "school_ncaa_code": null,
      "school_abbrev": "EFSC",
      "logo": "http://clients.url.com/files/logos/njcaa/Eastern-Florida-State.png",
      "colors_id": null,
      "url": null,
      "safe_text_white": null,
      "safe_text_black": null,
      "primary_background": null,
      "primary_text": null,
      "secondary_background": null,
      "secondary_text": null,
      "client_id": null,
      "created": null,
      "deleted": null
    }
]

Answer 1

You need to have Id value in the JSON in order to make it selectable. https://jsfiddle.net/adiioo7/Lqso63mw/2/

JS

function formatResults (results) {
    if (results.loading) return "Searching...";
    var markup = "<div class='select2-result'>" + results.school_name + "</div>";
    return markup;
}

function formatRepoSelection (results) {
      return results.school_name;
}

$('#school_input').select2({
  ajax: {
    url: "https://api.myjson.com/bins/15d345",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        school_name: params.term, 
      };
    },
    processResults: function (data, params) {
        $(data.schools).each(function(){
        this.id=this.school_id;
      });
      return {
        results: data.schools,
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 3,
  templateResult: formatResults,
  templateSelection: formatRepoSelection
});

Answer 2

You need to return your markup from the formatResults() function :

function formatResults (results) {
  if (results.loading) return "Searching...";
  return "<div class='select2-result'>" + results.school_name + "</div>";  
}

See the documentation