Select2 Ajax 无法从 API 中提取 select 选项

Question

我正在尝试使用 API 中的数据来填充 select 输入。我正在使用 Select2 并且一切正常，但一旦找到结果就无法 select 任何东西。我将在下面 post 我的代码，我已经为此工作了 12 多个小时，但在 Internet 上找不到任何有效甚至有助于更接近的东西。

HTML:

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

选择 2 设置：

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
});

从 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

您需要 return 来自 formatResults() 函数的标记：

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

见documentation

Answer 2

您需要在 JSON 中包含 Id 值才能使其可选择。 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
});

Select2 Ajax 无法从 API 中提取 select 选项

Select2 Ajax can't select options being pulled in from API

javascript

api

ajax

jquery

select2