Question

我在理解如何正确地将Bootstrap / TagsInput应用于表单时遇到问题。

我的目标是使用TagsInput创建一个包含一个字段的表单，而使用另一个不使用它的字段。

有两个问题：

TagsInput似乎适用于任何表单字段，而不仅仅是我使用data-role =“tagsinput”指定的字段
标签不会停留在表单字段内，因为表单字段始终位于标记的“正前方”。

以下是代码：

        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的新手，所以任何指导都会在我做错事的地方受到赞赏。

我发现了一些类似的stackoverflow问题，但没有一个问题似乎完全符合这两点（并提供了答案）。

感谢您的帮助！

Answer 1

您在“form-inline”类中创建了两个div，它们都有action =“/ items / create”和method =“post”属性。要纠正这个问题，只需将我显示的不同字段分开即可。
这可能是您正在使用的CDN的问题。我发现formvalidation.io上的另一个似乎运行得很好。您可以根据自己的需要进行更改。

修改

我们还需要选择标签输入表单并在其中执行相关的javascript处理。每个输入字段都成为标记输入字段，因为我们忘记在进行操作之前添加$（'＃TagsInputForm'）选择器。

HTML：

<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.css" /> <script src="//cdn.jsdelivr.net/bootstrap.tagsinput/0.4.2/bootstrap-tagsinput.min.js"></script> <form> <fieldset class="form-group"> <label for="formGroupExample">No tags</label> <input type="text" class="form-control" id="formGroupExample"> </fieldset> <fieldset class="form-group"> <label for="formGroupExample2">No tags</label> <input type="text" class="form-control" id="formGroupExample2"> </fieldset> </form> <form id="TagsInputForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2">Tag input</label> <div class="col-sm-10"> <input type="text" name="tags" class="form-control" value="Tag" data-role="tagsinput" /> </div> </div> </form> </form>

JS：

$(document).ready(function () { $('#TagsInputForm') { var citynames = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), queryTokenizer: Bloodhound.tokenizers.whitespace, prefetch: { url: 'https://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() }} }); });

Bootstrap / TagsInput应用于所有表单域/未正确显示

1 个答案: