CODEWITHSUNDEEP
javascriptjqueryajaxapijquery-select2
Joe Scotto
Joe Scotto

Reputation: 10857

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

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
    }
]

Upvotes: 0

Views: 584

Answers (2)

Aditya Singh
Aditya Singh

Reputation: 9612

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

enter image description here

Upvotes: 2

Drown
Drown

Reputation: 5982

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

Upvotes: 0

Related Questions