2

Bootstrap/TagsInput をフォームに適切に適用する方法を理解するのに問題があります。

私の目標は、TagsInput を使用する 1 つのフィールドとそれを使用しない別のフィールドを持つフォームを作成することです。

2 つの問題があります。

  1. TagsInput は、 data-role="tagsinput" で指定したものだけでなく、任意のフォーム フィールドに適用されるようです
  2. フォーム フィールドは常にタグの「直前」にあるため、タグはフォーム フィールド内にとどまりません。

コードは次のとおりです。

        var citynames = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/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()
        }
        });
        .tt-query {
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        }

        .tt-hint {
        color: #999
        }

        .tt-menu {    /* used to be tt-dropdown-menu in older versions */
        width: 422px;
        margin-top: 4px;
        padding: 4px 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
                border-radius: 4px;
        -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
            -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
                box-shadow: 0 5px 10px rgba(0,0,0,.2);
        }

        .tt-suggestion {
        padding: 3px 20px;
        line-height: 24px;
        }

        .tt-suggestion.tt-cursor,.tt-suggestion:hover {
        color: #fff;
        background-color: #0097cf;

        }

        .tt-suggestion p {
        margin: 0;
        }
        
        .bootstrap-tagsinput{
            width: 40%;
            display: block;
        }
        
        .twitter-typeahead {
            width: 40%;
            display: block;            
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/themes/github.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.js"></script>
<form class="form-inline" role="form" action="/items/create", method="post">
        <div class="form-group">
            <label for="title">Title (should be no tags input):</label>
            <input type="text" class="form-control" id="title" name="title">
        <div class="form-group">
            <label for="tags"> Tags (should have tags input):</label>
            <input type="text" class="form-control" id="tags" name="tags" data-role="tagsinput">
        <button type="submit" class="btn btn-default"> Submit</button>
    </form>

ここに私のコードを含む JSFiddle があります: https://jsfiddle.net/gg6rwmwa/1/

私は JavaScript/CSS を初めて使用するので、どこで間違っているかについてのガイダンスをいただければ幸いです。

同様のスタックオーバーフローの質問をいくつか見つけましたが、これらの 2 つの点に正確に当てはまった (そして回答を提供した) ものはありませんでした。

助けてくれてありがとう！

4

1 に答える 1