javascript - 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;

}