我应该如何将 Bootstrap 3 tokenfield 与自动完成和提前输入一起使用？

Question

我尝试重现使用 Twitter Typeahead 示例 http://sliptree.github.io/bootstrap-tokenfield/。我只对原始代码做了最小的修改。

<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/bloodhound.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/theme.css"></link>
</head>

<body>

<input type="text" class="form-control" id="tokenfield-typeahead" value="red,green,blue" />

<script>
var engine = new Bloodhound({
  local: [{value: 'red'}, {value: 'blue'}, {value: 'green'} , {value: 'yellow'}, {value: 'violet'}, {value: 'brown'}, {value: 'purple'}, {value: 'black'}, {value: 'white'}],
  datumTokenizer: function(d) {
    return Bloodhound.tokenizers.whitespace(d.value);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace
});

engine.initialize();

$('#tokenfield-typeahead').tokenfield({
  typeahead: [null, { source: engine.ttAdapter() }]
});
</script>

</body>

</html>

我的问题是缺少自动完成和提前输入的样式。（我有一个带有 bower 包的版本，但结果是一样的。）

我考虑过

Twitter Typeahead comes with no default styling. Make sure to include tokenfield-typeahead.css on your page.

文档中的句子，但提到的 css 文件已包括在内。

为了正确的自动完成和提前输入样式，我应该更正什么？

Answer 1

确切的问题出在包含的 typeahead.js 版本上。它适用于 0.10.1，但不适用于 0.11.1。降级到 0.10.1 解决了这个问题。

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
</head>
<body>
    <input type="text" class="form-control" id="tokenfield-typeahead" value="red,green,blue" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.1/typeahead.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
    <script type="text/javascript">
        $(function () {
            var engine = new Bloodhound({
                local: [{
                    value: 'red'
                }, {
                    value: 'blue'
                }, {
                    value: 'green'
                }, {
                    value: 'yellow'
                }, {
                    value: 'violet'
                }, {
                    value: 'brown'
                }, {
                    value: 'purple'
                }, {
                    value: 'black'
                }, {
                    value: 'white'
                }],
                datumTokenizer: function(d) {
                    return Bloodhound.tokenizers.whitespace(d.value);
                },
                queryTokenizer: Bloodhound.tokenizers.whitespace
            });

            engine.initialize();

            $('#tokenfield-typeahead').tokenfield({
                typeahead: [null, {
                    source: engine.ttAdapter()
                }]
            });
        });
    </script>
</body>
</html>

我应该如何将 Bootstrap 3 tokenfield 与自动完成和提前输入一起使用？

How should I use Bootstrap 3 tokenfield with autocomplete and typeahead?

jquery-ui-autocomplete

typeahead.js

bootstrap-tokenfield