javascript - 先行入力がタグ入力で機能しない

Question

tagsinputを使用して、先行入力ライブラリで選択できるタグを作成しています。問題は、タイプアヘッドが表示されないことです。私は promise を使用して、初期化が機能しているかどうかを確認しています。タグ入力も機能しています (奇妙な動作があります)。

だから、何が問題なのかよくわかりません。これらのライブラリが最新の状態に保たれていないことは知っていますが、機能するはずです。

JSFIDDLE

<div class="container">
    <div class="row">
        <div class="form-group">
            <label for="tags">Tags</label>
            <form action="">
                <input type="text" id="tags" name="tags" class="form-control" data-role="tagsinput" />
            </form>
        </div>
    </div>
</div>

$(document).ready(function () {

    var cities = ["Amsterdam", "Washington", "New York"];


    var citynames = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: cities
    });

    var promise = citynames.initialize();
    promise
        .done(function () { console.log('ready to go!'); })
        .fail(function () { console.log('err, something went wrong :('); });

    $('#tags').tagsinput({
        typeahead: {
            name: 'citynames',
            displayKey: 'name',
            valueKey: 'name',
            source: citynames.ttAdapter()
        }
    });

});