input value attribute not being honoured when using objects tags with typeahead

I am doing teh following.

<input class="form-control" data-tags-data="[{"value":"...","text":"None.."},{"value":"OB-LINK:2:4","text":"Employment Opportunities"},{"value":"OB-LINK:2:6","text":"test category"}]" data-th="json" data-val="true" id="taggedcategories" name="taggedcategories" placeholder="" title="" type="text" value="OB-LINK:2:6" style="display: none;">

This is my input, im binding the typahead to the json in teh data-tags-json attribute. This is workign fien for adding new tags and saving them etc.

However when i reload the page i can see the original input has teh correct value(OB-LIN:2:6 above) but after the taginput is created there is no initial tags present. I create the input as follows.

`    $('[data-th=json]').each(function (i, ob) {
        console.log('found tags ds');
        var current = $(ob).val().split(',');
        var rawData = $(ob).attr("data-tags-data");
        console.log(JSON.parse(rawData));
        var data = JSON.parse(rawData);
         var ti = $(ob).tagsinput({
            typeahead: {
                source: JSON.parse(rawData),
                hint: true,
                displayKey: 'text'
            },

            itemText: function (item) { return item.text; },
            itemValue: function (item) { return item.value; },
            freeInput: false
        }); 
    });`

It seems there is an issue binding the value attribute to the data objexts in my source array.

Cheers.

James

mdbootstrap / bootstrap-templates

input value attribute not being honoured when using objects tags with typeahead #623