2

このようなモーダルに含まれるフォームでブートストラップタグ入力を使用しようとしています

...
<div class="form-group">
                            <label for="myTagLabel">Tags:</label> 
                            <input class="form-control" id="myTag"  type="text" data-role="tagsinput">
                        </div>

また、次のコードでTwitterの先行入力を使用しようとしています

var tagValues = ['ATag','AnotherTag'];

    var tagVals = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: $.map(tagValues, function(tagValue) { return { value: tagValue }; })
    });

    // kicks off the loading/processing of `local` and `prefetch`
    tagVals.initialize();

    $('#myTag').tagsinput({
        typeaheadjs: {
            name: 'tagVals',
            displayKey: 'value',
            valueKey: 'value',
            source: tagVals.ttAdapter()
        }
    });

上の画像で結果を見ることができます。この場合の問題は、角が丸いフレームに先行入力候補が含まれていないことです。

ここに画像の説明を入力

4

1 に答える 1

5

ページから CSS をリッピングします。ボックス内に提案を配置するために必要な CSS は次のとおりです。ページにはさらに多くの CSS があります。しかし、多くのブートストラップをオーバーライドします。

    /* CSS for typeahead */
.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-dropdown-menu {
  width: auto;
  margin-top: 12px;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -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;
  font-size: 16px;
  line-height: 24px;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #CECBCB;

}
于 2014-08-13T18:39:28.100 に答える