web-dev-qa-db-ja.com

使用方法Bootstrap Tags Inputプラグイン

Typeaheadなしで Bootstrap Tags Input plugin を使用しようとしています。次のファイルを含めました。

<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../../tagsinput/css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css">
<script src="../../tagsinput/js/bootstrap-tagsinput.min.js"></script>

スクリプトは次のとおりです。

<script>
    $('#tagPlaces').tagsinput({
        allowDuplicates: true
    });
</script>

プラグインを使用するJSPフォームの一部：

<div class="form-group">
        <label for="tagPlaces" class="col-sm-2 control-label">Tag Places</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" data-role="tagsinput" id="tagPlaces">
        </div>
</div>

しかし、入力フィールドにタグが表示されません。また、タグのEnterキーを押すと、フォームが送信されます。不足しているものと、プラグインの正しい使用方法を提案してください。

jquerytwitter-bootstrap-3bootstrap-tags-input
8
Aman

これは私がやった方法です

<script src="../js/bootstrap-tagsinput.js"></script>
no more javascript

Css
元のbootstrap tags入力cssファイルを含めることができます

<link rel="stylesheet" href="../css/bootstrap-tagsinput.css">

または、これだけを使用できます

.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: block;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
}
.bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
}

そしてHTML

<input type="text" value="" data-role="tagsinput" id="tags" class="form-control">
17
Tonza