AnsweredAssumed Answered

sugarCRM's version of select2 jquery plugin.

Question asked by Nagy Zoltan on Jan 28, 2019
Latest reply on Feb 6, 2019 by Cesar Obed Gonzalez N.

   Hello. I am struggling with the creation of a select2 searchbox. The searchbox is an address_lookup inspired field, called google_lookup. I do an ajax call to a REST api, I get the results, the results are displayed as options in the select2 searchbox, but I can not seem to figure out the name of the event that is triggered when I actually select an option.

   The role of the searchbox would be to auto-fill the address fields, using google API. I tried select2:select, according to documentation https://select2.org/programmatic-control/events but it does not work.

   I studied clients/base/fields/relate/relate.js to figure out what sugar is using, and there I did not found anything related but I found that instead of using select2:open they use select2-open. So I tried select2-select, but does not work.

   Also when I open the searchbox AGAIN, the id (a hex string, that is what I need from my API and obtain correctly) is present in the searchbox, instead of the human readable address or ideally nothing. I tried to clear it using select2-open, the console log displays correct data but nothing happens with the searchbox. If I open the searchbox again, close the box, open again, the hex string is gone.

Relevant code:

({
  _render:function()
  {
    this._super('_render');
    var el=$('input[name="'+this.def.name+'"]');
    var module_from_select=el.attr('data-source-origin');
    //console.log("Module from select ==> "+module_from_select);
    var url_link=app.api.buildURL("googlelookup/autocomplete/");
    //console.log(url_link);
    el.select2(
      {
        width:'100%',
        minimumInputLength:2,
        minimumResultsForSearch:Infinity,
        allowClear:true,
        debug:true,
        ajax: {
          quietMillis:500,
          url: function (params) {
            var real_link=url_link+params;
            //console.log(real_link);
            return real_link;
          },
          transport:function(params)
          {
            params.beforeSend=function(request)
            {
              request.setRequestHeader("OAuth-Token", SUGAR.App.api.getOAuthToken());
            };
            return $.ajax(params);
          },
          results:function(data, page)
          {
            //console.log(data);
            return {results:data}; //correct values
          },
          processResults:function(data, params)
          {
            if(!params.page)
            {
              params.page=1;
            }
            //params.page = params.page || 1;
            return {
              results:data, pagination:{
                more:(params.page*30)<data.total_count
              }
            };
          }
        }
      }
    );
    el.on('select2-select',function(e)
    {
      console.log("The selection is : "+e); //never appears in console, select2:select, select2-select tried
    });
    el.on('select2-open',function(e)
    {
      console.log("Open select2, clear existing value => "+el.val()); //the hex string
      el.val("");
      console.log("After clear: "+el.val()); //nothing
    });
  }
})

Outcomes