0

Bootstrap タグ入力プラグインを使用しています。指定した入力フィールドに値をタグの形式で表示したいと考えています。これらの値は、おそらく json 形式で db から取得されます。ドキュメントhttps://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examplesに示されているように add メソッドを使用しました が、機能しませんでした。

私のフィドルのデモはこちら: https://jsfiddle.net/Lh4jy9d4/90/ $('input #expertise').tagsinput('add', {id: 1, text: 'javascript' })

4

1 に答える 1

1

@Siavas が述べたように、マークアップによると、フィルタリングは正しくありませんでした。入力タイプにその ID があったため、$('input #expertise') を $('#expertise') に変更しました。

tagsInput を初期化するのを忘れたため、この例は機能しませんでした。git-hub の例から適用されたこの作業スニペットを確認してください。

        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()
            }
        });
<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="form-group">
    <label class="col-lg-3 control-label">Expertise</label>
    <div class="col-lg-5">
        <input type="text" name="cities" id="expertise" class="form-control"  />
    </div>
</div>
<div class="form-group">
    <label class="col-lg-3 control-label">Interests</label>
    <div class="col-lg-5">
        <input type="text" name="cities1" id="interests" class="form-control" value="" data-role="tagsinput" />
    </div>
</div>
   




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>

于 2016-06-22T16:52:19.740 に答える