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