Блог

Приведенный ниже пример работает для меня,

 $('#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'
});
  

Но когда я попытался вызвать ajax, я не смог увидеть предложение. Однако мой сервер получает правильный ответ.

 $('#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'
);
  

Я использую Bootstrap 3 для вашей справки, которую я только что переименовал tagsinput bstagsinput , поскольку iIt конфликтовал с другим плагином jquery.

Пожалуйста, кто-нибудь поможет мне, как динамически отображать предложения через ajax? (Я потратил целый день на поиск решения, но ничего полезного для меня.

Из памяти параметр ответа — это функция, которую вам нужно вызвать с возвращенными данными, но вы переопределяете ее. Вы должны вызвать функцию ответа при успешном обратном вызове ajax-вызова.

 source: function (query, response) {
    return $.get('/ajax/customtags/gettags', {
        search: query,
        userId: 1
        }, function (data) {
             console.log(data);
             var result =  $.map(data.data, function (item) {
                  console.log(item.text);
                  item.text                            
             });
             response(result);
    }, 'json');
},
  

Потратив целый день и отладив код, я нашел решение.

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

Я отметил, что необходимо выполнить, поскольку часть обратного вызова обрабатывалась плагином самостоятельно. Который я нашел в приведенном ниже существующем коде в плагине.

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