“[object Object]”显示在输入字段中，带有 bootstrap3-typeahead 和 tagsinput答案

【问题标题】："[object Object]" showing in input field with bootstrap3-typeahead and tagsinput“[object Object]”显示在输入字段中，带有 bootstrap3-typeahead 和 tagsinput
【发布时间】：2015-06-04 15:31:32
【问题描述】：

选择标签时，标签添加正确，但输入框中附加了文本[object Object]。（见下图）

我正在使用 Bootstrap 3、JQuery、Bootstrap3-typeahead 和 bootstrap-tagsinput（所有最新版本）

表单位于模态窗口中。

代码如下：

jQuery('#banner_geo_locations').tagsinput({
    itemValue: 'value',
    itemText: 'text',
    typeahead: {
        displayKey: 'text',
        source: function (query) {
            return jQuery.get("http://dev.marijuanaweeklycoupons.com/?action=ajax|cityStateSsearchTags&PageSpeed=off&q=" + query);
        }
    }
});

Ajax 的样子：

[{"value":"2908762","text":"Dixon Corner, AL"},
{"value":"2956030","text":"Dixon Corner, ME"},
{"value":"3008251","text":"Dixon Corner, PA"},
{"value":"2931983","text":"Dixon Crossroads, GA"},
{"value":"3017149","text":"Dixon Crossroads, SC"},
{"value":"2959449","text":"Dixon Estates, MD"},
{"value":"2959450","text":"Dixon Hill, MD"},
{"value":"2993971","text":"Dixon Landing, NC"},
{"value":"2908763","text":"Dixon Shop, AL"},
{"value":"2938722","text":"Dixon Springs, IL"}]

在 fiddle

中查看

【问题讨论】：

@JayMee 没坏，只是因为安全限制，不允许对外发出请求。
这是一个不使用 Ajax 调用外部资源的版本jsfiddle.net/rgaxuyda/7
我的猜测是缩小中有些东西坏了
不管是什么，绝对不是你的代码OP。尝试“非缩小”版本。如果它仍在发生，请自己逐步完成。
我将尝试在 jsfiddle 中不进行缩小的情况下复制它。谢谢@jcuenod。

标签： jquery json twitter-bootstrap bootstrap-tags-input

【解决方案1】：

这是图书馆的问题。

添加以下内容即可解决问题：

afterSelect: function(val) { this.$element.val(""); },

因此，

jQuery('#banner_geo_locations').tagsinput({
    itemValue: 'value',
    itemText: 'text',
    typeahead: {
        displayKey: 'text',
        afterSelect: function(val) { this.$element.val(""); },
        source: function (query) {
            return jQuery.get(current_web_root + "?action=ajax|cityStateSearchTags&PageSpeed=off&q=" + query);
        }
    }
});

见 jsfiddle

https://jsfiddle.net/rgaxuyda/11/

【讨论】：

你怎么知道这是图书馆的问题？ afterSelect 回调当然会纠正问题，但问题是什么？

【解决方案2】：

幸运的爱德华，它有效，谢谢。

<script>
    var elt = $('#inputSoftwareList');
    elt.tagsinput({
        itemValue: 'value',
        itemText: 'text',
        typeahead: {
            source: function(query) {
                return $.getJSON('cities.json');
            },
            afterSelect: function(val) { this.$element.val(""); }
        }
    });

</script>

【讨论】：