CODEWITHSUNDEEP
twitter-typeaheadbootstrap-tags-input
Naga
Naga

Reputation: 2555

How to make TagsInput to work with both auto complete & free text

UPDATE This issue is already discussed in github here

I am using tagsinput with typeahead in bootstrap 3. The problem which I am experiencing is with the value in case if user selects the existing tag. Display text shows it right but .val() returns its actual object. Below is the code

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

The problem with above code is that it results as below while fetching tags from web method enter image description here

This happens when user select the existing tag. New tags no issues. I tried setting itemValue & itemText of tagsinput but not worked. Hence I decided a work-around of this problem. Since I could able get the json string as ['IRDAI", Object], if can somehow parse these object & get the actual tag value then I get the expected result of the code I am looking at.

Below is what it appears in tags input as [object Object] for text selected by user from auto populated drop down [![enter imt If I i specify TagId & TagValue to itemValue & itemText as below code 

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

Then the result is displaying as below when below code is executed

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

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

enter image description here

enter image description here

Upvotes: 0

Views: 1198

Answers (2)

Naga
Naga

Reputation: 2555

This may not be the clean solution but I got around this issue through below parsing method. Hope this helps someone.

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

Upvotes: 0

Will
Will

Reputation: 2191

Given your example JSON response from your data source:

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

You'll need to tell tagsinput how to map the attributes from your response objects using itemValue and itemText in your tagsinput config object. It looks like you may have started down that path, but didn't reach the conclusion, which should look something like:

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

Be sure to checkout the tagsinput examples.

Upvotes: 1

Related Questions