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 に答える