引导标签输入提前输入不起作用答案

【问题标题】：Bootstrap tagsinput typeahead not working引导标签输入提前输入不起作用
【发布时间】：2014-05-02 10:25:57
【问题描述】：

我有这个使用 bootstrap-tagsinputs 插件的输入，问题是我希望它自动完成标签，但它没有这样做！

标签部分完美无缺；）但自动完成部分却不行:(

有人知道为什么吗？，示例与插件页面中的示例相同：

http://timschlechter.github.io/bootstrap-tagsinput/examples/

这是我的代码：

<input id="tags-text-input"></input>

$("#tags-text-input").ready(function () {
            $("#tags-text-input").tagsinput();
            $("#tags-text-input").typeahead({
                typeahead: ["I'm done trying...", "Jhon", "Smith"]
            });
        });

我已经包含了 typeahead 插件和 tagsinput 插件。我做错了什么？

提前致谢。

【问题讨论】：

Typeahead plugin and Bootstrap Tags input plugin Meteor not working的可能重复

标签： twitter-bootstrap twitter-bootstrap-3 bootstrap-tags-input

【解决方案1】：

我认为您需要在标签输入中设置 typeahead ，如下所示：

<input id="tags-text-input"></input>
$("#tags-text-input").ready(function () {
    $("#tags-text-input").tagsinput({
        typeahead: {
            source: ["I'm done trying...", "Jhon", "Smith"]
        }
    });
});

【讨论】：

【解决方案2】：

我也为此苦苦挣扎了一整天，从这里那里到处提取数据碎片。我创建了一个简单的项目来消除所有外部影响，直到我开始工作，然后我能够成功地将其转移到我的项目中。

这是我的基本项目，您应该可以使用它来证明您可以让这个概念发挥作用，并作为一个与您的项目进行比较的工作示例。

自己创建一个 html 文件并将其粘贴进去。

<!DOCTYPE html>
<html>
<head>
    <title>TagsInput and TypeAhead TOGETHER!</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap-tagsinput.css">
</head>
<body>
    <h1>TagsInput and TypeAhead TOGETHER!</h1>

    <select id="Country">
        <option>UK Cars</option>
        <option>German Cars</option>
    </select>

    <input type="text" id="carsSearch" placeholder="Type Car Names" />

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-tagsinput.min.js"></script>
    <script type="text/javascript" src="js/bootstrap3-typeahead.js"></script>
    <script type="text/javascript" src="js/tagsinput and typeahead.js"></script>
</body>
</html>

创建一个 js 文件夹和一个名为 tagsinput 和 typeahead.js 的文件并将其粘贴进去。

$(document).ready(
    function () {
        // Call the data population
        bindCarList();
    }
);

bindCarList = function () {
    // Call TagsInput on the input, and set the typeahead source to our data
    $('#carsSearch').tagsinput({
        typeahead: {
            source: function () {
                if ($('#Country').val() == "UK Cars") {
                    return ["Lotus", "TVR", "Jaguar", "Noble", "Land Rover", "Rover"];
                } else {
                    return ["BMW", "Audi", "Volkswagen", "Mercedes-Benz"];
                }
            }
        }
    });

    $('#carsSearch').on('itemAdded', function (event) {
        // Hide the suggestions menu
        $('.typeahead.dropdown-menu').css('display', 'none')
        // Clear the typed text after a tag is added
        $('.bootstrap-tagsinput > input').val("");
    });
}

您需要下载一些文件，但我已尽可能使用 CDN 以将其保持在最低限度。

/css/bootstrap-tagsinput.css 和
/js/bootstrap-tagsinput.min.js 来自https://github.com/timschlechter/bootstrap-tagsinput/tree/master/src
/js/bootstrap3-typeahead.js 来自https://github.com/bassjobsen/Bootstrap-3-Typeahead

这并不完美。添加标签后，我不得不使用解决方法来清除搜索文本并隐藏列表。但是，您不能从输入中抽出，这不是很好。不过还是不错的，也许有人可以改进一下。

【讨论】：