bootstrap-tags input + typeahead 作为源不起作用答案

【问题标题】：boostrap-tagsinput + typeahead as source doesnt workbootstrap-tags input + typeahead 作为源不起作用
【发布时间】：2017-02-06 09:09:05
【问题描述】：

var engine = new Bloodhound({
            remote: {
                url: 'http://mockie.dev/blog/tag/autocomplete?keyword=%QUERY%',
                wildcard: '%QUERY%'
            },
            datumTokenizer: Bloodhound.tokenizers.whitespace('title'),
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });

        $(".typeahead").tagsinput({
           typeahead: {
               source: engine.ttAdapter()
           }
        });

json 返回源：

[{"id":3,"user_id":1,"title":"Book Review 1","slug":"book-review","meta_keyword":null,"body":"book review","meta_description":null,"created_at":"2017-02-01 18:39:46","updated_at":"2017-02-05 13:26:05","article_counter":0}]

这些是我使用的 js 文件： https://github.com/bootstrap-tagsinput/bootstrap-tagsinput/blob/master/src/bootstrap-tagsinput.js 和最新的 https://github.com/twitter/typeahead.js

这就是我所知道的，该代码仅在 typeahead 上有效，但当我使用 tagsinput 并将 typeahead 作为源时它不起作用。从早上开始，我一直在尝试解决这个问题，我尝试了 boostrap-typeahead、typeahead、bloodhound。但未能工作，因为它们都没有良好的文档，并且“问题”部分似乎没有人在 github 上回答它们。

我也读过这个http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/（打字头部分），但我不知道该怎么做。

【问题讨论】：

标签： javascript typeahead.js bootstrap-tags-input

【解决方案1】：

尝试 typeaheadjs 作为源对象

$(".typeahead").tagsinput({
       typeaheadjs: {
           source: engine.ttAdapter()
       }
    });

【讨论】：

能提供jsfiddle上的demo吗？

【解决方案2】：

你应该在标签输入之前初始化引擎对象

var engine = new Bloodhound({
        remote: {
            url: 'http://mockie.dev/blog/tag/autocomplete?keyword=%QUERY%',
            wildcard: '%QUERY%'
        },
        datumTokenizer: Bloodhound.tokenizers.whitespace('title'),
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });

    engine.initialize()

    $(".typeahead").tagsinput({
       typeahead: {
           source: engine.ttAdapter()
       }
    });

【讨论】：