12

我有这个使用 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 插件。我做错了什么？

提前致谢。

4

2 回答 2

3

我也一直在为此苦苦挣扎，从这里和任何地方提取数据碎片。我创建了一个简单的项目来消除所有外部影响，直到我让它工作，然后我能够成功地将它转移到我的项目中。

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

自己创建一个 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 以将其保持在最低限度。

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

于 2015-08-06T15:42:55.467 回答
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"]
        }
    });
});
于 2014-07-31T19:34:42.500 回答