1

クライアントプログラミングを始めたばかりなので、これは初心者のエラーかもしれません。ブートストラップ tagsinputプラグインの例を動作させようとしています。マークアップで提供される値 (例: value="Amsterdam,Washington") は Backspace を使用して削除できないことを除いて、ほとんどの場合削除されます。テスト ページの読み込み時にタグとして表示されますが、各タグの「x」をクリックすることによってのみ削除できます。

入力して作成した新しいタグは、期待どおりに機能します ([x] をクリックするか、バックスペースで削除できます)。

最初のタグは div 要素 (クラス bootstrap-tagsinput) で終わるように見えます。これには、それらに加えて、新しい (入力された) タグが追加される別の div 要素 (クラス bootstrap-tagsinput) も含まれます。 .

これは、最初のタグを含むすべてのタグをバックスペースで削除できる例の動作とは異なります。

ブラウザに表示されるテスト ページのスクリーンショット

クラスbootstrap-tagsinputを持つ2つのdivのスクリーンショット

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-tagsinput.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/bootstrap-tagsinput.js"></script>
    <script src="Scripts/typeahead.bundle.min.js"></script>
    <script src="TagsInputTest.js"></script>
    <style>
        /*.bootstrap-tagsinput {
            width: 100%;
        }*/

        .accordion {
            margin-bottom: -3px;
        }

        .accordion-group {
            border: none;
        }

        .twitter-typeahead .tt-query,
        .twitter-typeahead .tt-hint {
            margin-bottom: 0;
        }

        .twitter-typeahead .tt-hint {
            display: none;
        }

        .tt-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            z-index: 1000;
            display: none;
            float: left;
            min-width: 160px;
            padding: 5px 0;
            margin: 2px 0 0;
            list-style: none;
            font-size: 14px;
            background-color: #ffffff;
            border: 1px solid #cccccc;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            background-clip: padding-box;
        }

        /*.bootstrap-tagsinput {
            width: 100% !important;
        }*/

        .tt-suggestion > p {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.428571429;
            color: #333333;
            white-space: nowrap;
        }

            .tt-suggestion > p:hover,
            .tt-suggestion > p:focus,
            .tt-suggestion.tt-cursor p {
                color: #ffffff;
                text-decoration: none;
                outline: 0;
                background-color: #428bca;
            }
    </style>
</head>
<body>
    <!--<div class="clearfix">&nbsp;</div>-->
    <div class="container">
        <div class="row">
            <h3>select</h3>
            <select multiple data-role="tagsinput">
                <option value="Amsterdam">Amsterdam</option>
                <option value="Washington">Washington</option>
                <option value="Sydney">Sydney</option>
                <option value="Beijing">Beijing</option>
                <option value="Cairo">Cairo</option>
            </select>
            <br />
            <h3>input</h3>
            <input type="text" value="Amsterdam,Washington" data-role="tagsinput" />
        </div>
    </div>
</body>
</html>

$(document).ready(function () {
var citynames = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: 'assets/citynames.json',
        filter: function (list) {
            return $.map(list, function (cityname) {
                return { name: cityname };
            });
        }
    }
});
citynames.initialize();

$('input').tagsinput({
    typeaheadjs: {
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        source: citynames.ttAdapter()
    },
    maxTags: 3
});
});

アドバイスをいただければ幸いです。

4

2 に答える 2

0

valuehtml属性で初期値を設定する代わりに、 javascript を使用して初期値を設定することで、プラグインがそれらをそのように扱うことを理解できるようにする必要があると思います。

$('input').tagsinput({
    typeaheadjs: {
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        source: citynames.ttAdapter()
    },
    maxTags: 3
});
$('input').tagsinput('add', 'Amsterdam').tagsinput('add', 'Washington');
于 2015-08-20T05:52:29.710 に答える
0

入力要素に一意の ID を追加した後、問題 ( value属性を介して追加されたタグを削除できない) はなくなりました。サンプル コードでは一意の ID が使用されていないため、これが私の場合に役立つ理由がわかりません。テストページのマークアップから、bootstrap-tagsinput のクラスを持つ重複した div を確実に削除しました。

于 2015-08-20T14:26:18.217 に答える