Select2 Ajax can't select options being pulled in from 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
    }
]

Possible duplicate of [Unable to select a result from the select2 search results](https://stackoverflow.com/questions/15933830/unable-to-select-a-result-from-the-select2-search-results) — jgerman, Oct 01 '19 at 14:31

Aditya Singh · Accepted Answer · 2017-02-24T07:14:34.047

2

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

edited Feb 24 '17 at 07:14

answered Feb 23 '17 at 16:49

Aditya Singh

9,512
5
32
55

The link is working now but I'm still unable to select anything in the dropdown. – Joe Scotto Feb 23 '17 at 18:16
@JoeScotto Type 4 letters atleast it returns the data on search. – Aditya Singh Feb 24 '17 at 05:47
Yes, but my issue is that I cannot select any of the values. I can get the select to populate just fine. – Joe Scotto Feb 24 '17 at 06:01
@JoeScotto Try the updated fiddle. It's mandatory to have Id field in the JSON data. – Aditya Singh Feb 24 '17 at 07:15

score 0 · Answer 2 · answered Feb 23 '17 at 16:14

0

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

answered Feb 23 '17 at 16:14

Drown

5,852
1
30
49

My bad, my actual code has `return markup;`, see updated question. I tried what you have and still get the same issue where once results are found, I cannot select any of them. – Joe Scotto Feb 23 '17 at 16:16

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

2 Answers2