This is how i did in my last project
require('typeahead.js'); //import typeahead
let Handlebars = require('handlebars'); //import Handlebars which is a small size js template engine
let axios = require('axios');
$('.typeahead').typeahead({
highlight: true,
},
{
display: 'title',
source: function (query, syncResults, asyncResults) {
axios.get('/search', {
responseType: 'json',
params: {
query: query
}
}).then(function (response) {
asyncResults(response.data);
});
},
templates: {
empty: Handlebars.compile('<div class="bg-white border p-3 rounded"><p>No results found</p></div>'),
suggestion: Handlebars.compile('<div class="d-flex bg-white border p-3 rounded"><div class="w-75 mr-2"><p class="h4">{{title}}</p><p>{{description}}</p></div><div class="w-25"><img class="img-fluid" src="{{thumbnail}}" alt="title" style="max-height: 150px"></div></div>')
//<a href="/products/{{slug}}" class="position-absolute" style="height: 100%; width: 100%; top:0; left: 0"></a>
}
});