bootstrap：输入和预输入标签

Question

我正在尝试使用模态中包含的形式的引导标签输入

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

我也在尝试将以下代码与Twitter typeahead一起使用

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()
        }
    });

您可以在上面的图像中看到结果。 在这种情况下，问题在于带有圆角的框架中不包含预先输入建议

Answer 1

从页面抓取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;

}