Question

更新此问题已在github here

中讨论过

我在bootstrap 3中使用带有typeahead的tagsinput。我遇到的问题是如果用户选择现有标签，则为值。显示文本显示正确，但.val（）返回其实际对象。以下是代码

 $('#tags').tagsinput({
                        //itemValue: 'value',
                        typeahead: {
                            source: function (query) {
                                //tags = [];
                                //map = {};
                                return $.getJSON('VirtualRoomService.asmx/GetTags?pid=' + $("#<%=hdnPID.ClientID%>").val() + '&tok=' + query)
                                //, function (data) {
                                //    $.each(data, function (i, tag) {
                                //        map[tag.TagValue] = tag;
                                //        tags.push(tag.TagValue);
                                //    });
                                //    return process(tags);
                                //});
                            }
                        }
                        //freeElementSelector: "#freeTexts"
                    });

上面代码的问题在于，从web方法获取标记时，结果如下所示

当用户选择现有标签时会发生这种情况。新标签没有问题。我尝试过设置itemValue＆amp; tagTeput的itemText但没有工作。因此我决定解决这个问题。因为我能够将json字符串作为['IRDAI“，Object]，如果可以以某种方式解析这些对象并获得实际的标记值，那么我得到了我正在查看的代码的预期结果。

下面是用户从自动填充的下拉列表中选择作为[object Object]输入的标签中显示的内容 [！[输入imt 如果我指定TagId＆amp; TagValue到itemValue＆amp; itemText如下代码

            $('#tags').tagsinput({
                itemValue: 'TagId',
                itemText: 'TagValue',
                typeahead: {
                    source: function (query) {
                        //tags = [];
                        //map = {};
                        return $.getJSON('VirtualRoomService.asmx/GetTags?pid=' + $("#<%=hdnPID.ClientID%>").val() + '&tok=' + query)
                        //, function (data) {
                        //    $.each(data, function (i, tag) {
                        //        //map[tag.TagValue] = tag;
                        //        tags.push(tag.TagValue);
                        //    });
                        //});
                        //  return process(tags);

                    }
                }
                //freeElementSelector: "#freeTexts"
            });

然后，当执行以下代码时，结果显示如下

var arr = junit.Tags.split(',');

                            for (var i = 0; i < arr.length; i++) {
                                $('#tags').tagsinput('add', arr[i]);
                            }

Answer 1

给出来自数据源的示例JSON响应：

[
  {"TagId":"1", "TagValue":"eSign"},
  {"TagId":"2", "TagValue":"eInsurance Account"}
]

您需要告诉tagsinput如何使用tagsinput配置对象中的itemValue和itemText来映射响应对象中的属性。看起来你可能已经开始走这条道路，但没有得出结论，看起来应该是这样的：

$('#tags').tagsinput({
  itemValue: 'TagId',
  itemText: 'TagValue',
  typeahead: {
    source: function (query) {
      return $.getJSON('VirtualRoomService.asmx/GetTags?pid=' + $("#<%=hdnPID.ClientID%>").val() + '&tok=' + query);
    }
  }
});

务必查看tagsinput examples。

Answer 2

这可能不是一个干净的解决方案，但我通过下面的解析方法解决了这个问题。希望这有助于某人。

            var items = $('#tags').tagsinput("items");
            var tags = '';
            for(i = 0; i < items.length; i++)
            {
                if(JSON.stringify(items[i]).indexOf('{') >= 0) {
                    tags += items[i].TagValue;
                    tags += ',';
                } else {
                  tags += items[i];
                  tags += ',';
                }
            }

如何使TagsInput兼容自动完成＆amp;自由文本

2 个答案: