Selected item sub-text and icon not displayed

[PhilPJL]

I'm initialising the select like so:

            // Initialise item picker
            var object = $('#@Html.IdFor(m => m.ItemName)');
            if (object !== null && object !== undefined) {
                object.selectpicker();
                object.ajaxSelectPicker({
                    ajax: {
                        url: '@Url.Action("GetItemsJavaScriptArray")',
                        data: function() {
                            var params = {
                                q: '{{{q}}}'
                            };
                            return params;
                        }
                    },
                    cache: false,
                    locale: {
                        emptyTitle: '@Resources.SearchForItem...',
                        statusSearching: '@Resources.SearchingForItem...',
                        statusTooShort: '@Resources.MinCharsRequired'
                    },
                    minLength: 3,
                    preserveSelected: false
                });
            }

Which works fine and we get a nice drop down like this

However when I select one of the items, the sub-text and icon aren't displayed, just the text - as you can see in the image.

It should really look like:

[truckingsim]

Does this happen with just straight bootstrap-select, not ajax-bootstrap-select?

[PhilPJL]

Yes it works fine for straight bootstrap-select.

[diegoldev]

I'm having same issue but with data-content. Data-content shows fine in the dropdown but when is selected shows only text. The problem is only with ajax-boostrap-select, in straight bootstrap-select works fine (see attached image, 'Prueba' dropdown is working with straight bs-select, tags with ajax-bs-select)

[miki995]

Having same issues @truckingsim.

Before starting typing ( using ajax ) => http://i.imgur.com/2DQ1ZCU.png After one single letter => http://i.imgur.com/NgYSRJB.png

Can we fix this? :D

This is my setup:

select.ajaxSelectPicker({
        locale: {
          searchPlaceholder: placeholderText,
        },
        ajaxSearchUrl: `my awesome url`,
        ajax: {
          type: 'GET',
          headers: {
            'Authorization': `Bearer my token`
          },
          dataType: 'json',
          data: () => {
            return {
              searchBy: '{{{q}}}',
              maxResults: 5
            };
          }
        },
        emptyRequest: true,
        preprocessData: function (items: Object[]) {

      I do Some Magic...

          return apiResponse;
        },
        preserveSelectedPosition: 'before',
        preserveSelected: false // if set to true, cause bug with ghost elements.
      });