Question

我正在尝试使用API中的数据来填充选择输入。我正在使用Select2并且一切正常，但一旦找到结果就无法选择任何内容。我将在下面发布我的代码，我已经在这方面工作超过12个小时，在互联网上找不到任何有效的东西，甚至有助于靠近。

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

您需要在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 });

Answer 2

您需要从formatResults()函数返回标记：

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

请参阅documentation

Select2 Ajax无法选择从API

2 个答案: