Unable to show suggestion for bootstrap tag input with typehead & ajax call

Question

The below exp working for me,

$('#casecustomtag').bstagsinput({
    typeahead: {
        displayText: function (text) {
            return text;
        },
        source: function (query, response) {
            return ['Business and industry', 'Economics and finance', 'Education and skills', 'Employment, jobs and careers', 'Environment', 'Government, politics and public administration', 'Health, well-being and care', 'Housing', 'Information and communication', 'International affairs and defence', 'Leisure and culture', 'Life inthe community', 'People and organisations', 'Public order, justice and rights', 'Science, technology and innovation', 'Transport and infrastructure']
        },
        minLength: 2
    },
    addOnBlur: true,
    freeInput: true,
    confirmKeys: [13],
    splitOn: null,
    writerWidth: 'auto'
});

But when I tried for ajax call I am unable to see the suggestion. My server gets proper response, though.

$('#casecustomtag').bstagsinput({
   typeahead: {
       displayText: function (text) {
           return text;
       },
       source: function (query, response) {
           return $.get('/ajax/customtags/gettags', {
               search: query,
               userId: 1
           }, function (data) {
               console.log(data);
               response =  $.map(data.data, function (item) {
                   console.log(item.text);
                   return item.text;                         
               });
               return response;
           }, 'json');
       },
       minLength: 2
   },
   addOnBlur: true,
   freeInput: true,
   confirmKeys: [13],
   splitOn: null,
   writerWidth: 'auto'
);

I am using Bootstrap 3 for your reference I have just renamed tagsinput to bstagsinput as iIt has conflicted with other jquery plugin.

Please, anyone help me how to show suggestion dynamically via ajax ? (I have wasted whole day searching solution but nothing useful for me.

Answer 1

After wasting one whole day & code debugging I found the solution.

source: function (query, process) {
                    return $.get('/ajax/customtags/gettags', { search: query, userId: 1 },
                        function (data) {});
                },

I have noting needs to be done as call back part was handle by plugin it self. Which I found on below existing code in plugin.

source: function (query, process) {
                        function processItems(items) {
                            var texts = [];
                            for (var i = 0; i < items.length; i++) {
                                var text = self.options.itemText(items[i]);
                                map[text] = items[i];
                                texts.push(text);
                            }
                            process(texts);
                        }

                        this.map = {};
                        var map = this.map,
                            data = typeahead.source(query);

                        if ($.isFunction(data.success)) {
                            // support for Angular callbacks
                            data.success(processItems);
                        } else if ($.isFunction(data.then)) {
                            // support for Angular promises
                            data.then(processItems);
                        } else {
                            // support for functions and jquery promises
                            $.when(data)
                             .then(processItems);
                        }
                    },