Bootstrap tagsinput initial value setting it by javascript fails

Question

I'm using bootstrap-tagsinput v0.8.0 It mostly works, but I have trouble setting an initial value by javascript. I don't know how to call the "refresh" - method from the js file, too.

I try to do(on the console):

$("#fruits").val("A");
$("#fruits").val();//returns "A"

But the tag input field doesn't update.

The code can be seen in action here: https://codekutu.github.io/Bootstrap4TagsInputWithTypeahead/

And the js file I'm using is this: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.js

I have a second issue now: I want to update the data source for typeahead. I know my code is executed, but the typeahead is still in the old state.

My workaround is to remove the element, and re-insert html with the old initial state of the div, and then call the tagsinput on it.

This is ugly, I would want a better solution.

    var $tagInputPosition = modal.find(".tag-input-position");
var $tagInput = modal.find('.tag-input');

//clear triggers and attributes
var $cut = $tagInput.closest(".form-group.mt-5").remove();
var $clear= $("<div class=\"form-group mt-5\">\n" +
    "             <input type=\"text\" class=\"form-control tag-input\" placeholder=\"Tag ausw&auml;hlen\">\n" +
    "          </div>");
$tagInputPosition.after($clear);

$tagInput = modal.find('.tag-input');
$tagInput.tagsinput({
    typeaheadjs: ({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'tags',
        source: substringMatcher(tags)
    }),
    confirmKeys: [13, 32, 44],
});

Answer 1

I managed to make it work by setting the value and then attaching the tagsinput.

I still think there must be a neater solution using the refresh method for example.

modal.find("input.tag-input").val(shiftTags);
var allTags = $(".page").data("allTags");
setTagDataSource(allTags);