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;

}