无法使用 typehead 和 ajax 调用显示引导标记输入的建议答案

【问题标题】：Unable to show suggestion for bootstrap tag input with typehead & ajax call无法使用 typehead 和 ajax 调用显示引导标记输入的建议
【发布时间】：2016-10-13 15:46:47
【问题描述】：

下面的exp为我工作，

$('#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 动态显示建议吗？（我浪费了一整天的时间寻找解决方案，但对我没有任何用处。

【问题讨论】：

标签： jquery twitter-bootstrap-3 bootstrap-typeahead bootstrap-tags-input

【解决方案1】：

从内存中，响应参数是您需要使用返回的数据调用的函数，但您正在覆盖它。你应该在ajax调用的成功回调中调用response函数。

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

【讨论】：

这会给出错误“未捕获的类型错误：响应不是函数”

【解决方案2】：

在浪费了一整天和代码调试之后，我找到了解决方案。

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

【讨论】：