Question

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

提前致谢。

Answer 1

我整天都在苦苦挣扎，在这里和那里随处可见数据碎屑。我创建了一个简单的项目来消除所有外部影响，直到我开始工作，然后我就能成功地将它转移到我的项目中。

这是我应该用来证明你可以使这个概念有效的简单项目，并作为一个与你的项目进行比较的工作实例。

创建一个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

它并不完美。我必须使用变通方法来清除搜索文本，并在添加标记后隐藏列表。你可以不输入输入，这不是很好。虽然它很不错，也许有人可以改进它。

Answer 2

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

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

Bootstrap tagsinput typeahead不起作用

2 个答案: