Bootstrap tokenfield and Twitter typeahead dropdown not styled

Question

I have a question similar to this one but I'm using both Tokenfield v0.12.1 and Twitter typeahead v0.11.1. When I start typing and the suggestions appear, they are not styled. It shows as plain text (if I click on suggestion, it adds to input field). For example, if I type "re", the suggestion for "red" appears but it shows unstyled as follows:

{"_query":"re","value":"red","label":"red"}

My CSS source files

<link href="~/Content/bootstrap-tokenfield/tokenfield-typeahead.css" rel="stylesheet" />
<link href="~/Content/bootstrap-tokenfield/bootstrap-tokenfield.css" rel="stylesheet" />

My JS source files

<script src="~/Scripts/bootstrap-tokenfield.min.js"></script>
<script src="~/Scripts/typeahead.bundle.min.js"></script>
<script>
$(document).ready(function () {
    var engine = new Bloodhound({
        local: [{ value: 'red' }, { value: 'blue' }, { value: 'green' }, { value: 'yellow' }, { value: 'violet' }, { value: 'brown' }, { value: 'purple' }, { value: 'black' }, { value: 'white' }],
        datumTokenizer: function (d) {
            return Bloodhound.tokenizers.whitespace(d.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });

    engine.initialize();

    $('#tokenfield-typeahead').tokenfield({
        typeahead: [null, {
            source: engine.ttAdapter()
        }]
    });
});
</script>

My HTML

<input type="text" class="typeahead form-control" id="tokenfield-typeahead" />

My snippet is shown below. Please help with what I am doing incorrectly?

$(document).ready(function() {
  var engine = new Bloodhound({
    local: [{
      value: 'red'
    }, {
      value: 'blue'
    }, {
      value: 'green'
    }, {
      value: 'yellow'
    }, {
      value: 'violet'
    }, {
      value: 'brown'
    }, {
      value: 'purple'
    }, {
      value: 'black'
    }, {
      value: 'white'
    }],
    datumTokenizer: function(d) {
      return Bloodhound.tokenizers.whitespace(d.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace
  });

  engine.initialize();

  $('#tokenfield-typeahead').tokenfield({
    typeahead: [null, {
      source: engine.ttAdapter()
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>

<div class="row">
  <div class="col-lg-12">
    <dl class="dl-horizontal">
      <dt>Action Items:</dt>
      <dd>
        <div id="action-items">
          <input type="checkbox" name="item1" value="item1"> Action Item 1<br>
          <form class="form-inline">
            <div class="tokenfield form-group">
              <input type="text" class="typeahead form-control" id="tokenfield-typeahead" />
            </div>
            <button type="button" class="btn btn-default">Save</button>
          </form>
          <input type="checkbox" name="item2" value="item2"> Action Item 2<br>
          <input type="checkbox" name="item3" value="item3"> Action Item 3
        </div>
      </dd>
      <hr />
    </dl>
  </div>
</div>

Answer 1

For example, if I type "re", the suggestion for "red" appears but it shows unstyled as follows:

{"_query":"re","value":"red"...

In order to avoid that you need to add the displayKey option to your tokenfield:

$('#tokenfield-typeahead').tokenfield({
    typeahead: [null, {
        source: engine.ttAdapter(),
        displayKey: 'value'
    }]
});

$(document).ready(function() {
    var engine = new Bloodhound({
        local: [{
            value: 'red'
        }, {
            value: 'blue'
        }, {
            value: 'green'
        }, {
            value: 'yellow'
        }, {
            value: 'violet'
        }, {
            value: 'brown'
        }, {
            value: 'purple'
        }, {
            value: 'black'
        }, {
            value: 'white'
        }],
        datumTokenizer: function(d) {
            return Bloodhound.tokenizers.whitespace(d.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace
    });

    engine.initialize();

    $('#tokenfield-typeahead').tokenfield({
        typeahead: [null, {
            source: engine.ttAdapter(),
            displayKey: 'value'
        }]
    });
});

.tt-query, 
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    display: none;
}

.tt-menu { 
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor { 
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>



<div class="row">
    <div class="col-lg-12">
        <dl class="dl-horizontal">
            <dt>Action Items:</dt>
            <dd>
                <div id="action-items">
                    <input type="checkbox" name="item1" value="item1"> Action Item 1<br>
                    <form class="form-inline">
                        <div class="tokenfield form-group">
                            <input type="text" class="typeahead form-control" id="tokenfield-typeahead" />
                        </div>
                        <button type="button" class="btn btn-default">Save</button>
                    </form>
                    <input type="checkbox" name="item2" value="item2"> Action Item 2<br>
                    <input type="checkbox" name="item3" value="item3"> Action Item 3
                </div>
            </dd>
            <hr />
        </dl>
    </div>
</div>