JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://seefeld.site44.com/js/typeahead.bundle.min.js"></script>
<input type="text" id="search-input">
JavaScript
var data = [{
title: "some title here1",
desc: "some option here1",
category: [{
name: "category 1",
}, {
name: "categoy 2",
}]
},
{
title: "some title here2",
desc: "some option here2",
category: [{
name: "category 1",
}, {
name: "categoy 2",
}]
}];
var posts = new Bloodhound({
datumTokenizer: function(data) {
return Bloodhound.tokenizers.whitespace(data.title);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data
});
posts.initialize();
$('#search-input').typeahead({
highlight: true
}, {
name: 'Testing',
displayKey: 'title',
source: posts.ttAdapter(),
templates: {
header: '<h3>Pages</h3>'
}
});