javascript - Bootstrap : tags in input and typeahead

Question

我正在尝试使用 Bootstrap tagsinput在模态中包含的表单中像这样

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

您可以在上图中看到结果是什么。在这种情况下，问题在于圆 Angular 框架中不包含预先输入的建议

Answer 1

从页面中提取 CSS；这是将建议放入框内所需的 CSS。页面中有更多的 CSS；但它会覆盖很多 Bootstrap 。

    /* 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;

}