Select2 and JSON Data

Question

I am using select2 version 4 and I have a REST service control on an XPage, that reads the fullname column from the names.nsf.

I have the search working, but for some reason, I don't get a list of values back I can select.

The JSON object being returned, looks something like this:

[{"@entryid":"1376-E6D5EBE8ADBEFA7088257DF8006E4BA2","fullname":"Full Name\/OU\/O"},{"@entryid":"1375-FD1CB92A13BFD0E088257DE4006756D7","fullname":"Another Full Name\/OU\/O"}]

The code to initialize the select2 looks like this:

x$( "#{id:comboBox1}" ).select2({
  ajax: {
   url: "xJSON.xsp/names",
   dataType: 'json',
   delay: 250,
    data: function (params) {
      return {
      search:'[fullname=]*'+params.term+'*',       
      //  q: params.term, // search term
        page: params.page
      };
    },

    results: function (data, page){

    },
    processResults: function (data, page) {
      // parse the results into the format expected by Select2.
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data
      console.log(data);
      return {
        results: data
      };
    },
    cache: true
  },
  //escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 1
});

When I look at the browser's console, I can see that the search worked and JSON objects are being returned, however, I don't get a list of values to select from.

For the result return I've tried results: data.fullname and results: data, text:'fullname' but nothing happens.

What am I doing worng?

Answer 1

You need to either switch your JSON response to include id and text for each object, or re-map them in your processResults method. These two properties are required on all selectable objects now in Select2 4.0. Since I'm assuming you either can't change your JSON response, or it wouldn't make sense to, you can easily re-map the data with the following processResults method.

processResults: function (data) {
  var data = $.map(data, function (obj) {
    obj.id = obj.id || obj["@entityid"];
    obj.text = obj.text || obj.fullname;

    return obj;
  });

  return {
    results: data
  };
});

This will map the @entityid property to the id property and the fullname property to the text property. So selections will be sent to your server containing the @entityid and will be displayed using the fullname .

---

Also, the results method is no longer needed in Select2 4.0. This was renamed to the current processResults method.

Answer 2

I copied your code exactly as it is, and just changed the fieldname and the search query and worked out just fine.

This is my JSON looks like

[{"@entryid":"1482-AD112B834158AD0D80257E4B004EC42E","@unid":"AD112B834158AD0D80257E4B004EC42E","id":"Victor Hunter","text":"Odhran Patton"},{"@entryid":"1496-291F2480D806A91E80257E4B004EC3D2","@unid":"291F2480D806A91E80257E4B004EC3D2","id":"Wesley O'Meara","text":"Wesley O'Meara"},{"@entryid":"1421-CC19D06880F5DC2980257E4B004EC537","@unid":"CC19D06880F5DC2980257E4B004EC537","id":"Stephen Woods","text":"Emma Doherty"}]

What I know is that select2 expects an id , and a text parameters from the JSON .