JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://pgsuae.info/typeahead/typeahead.css">
<script src="http://pgsuae.info/typeahead/handlebars-v1.3.0.js"></script>
<script src="http://pgsuae.info/typeahead/typeahead.bundle.js"></script>
 <input type="text" value="" placeholder="Type letter e here" id="cname" name="cname" class="text1">

JavaScript

var bestPictures = new Bloodhound({
	  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
	  queryTokenizer: Bloodhound.tokenizers.whitespace,
	  local: [{"id":"38","value":"Entertaintment","parent_id":"27","children":"1","childCategories":[{"id":"28","value":"Movies","parent_id":"38"},{"id":"29","value":"Sports","parent_id":"38"}]},{"id":"40","value":"eeen","parent_id":"27","children":"1","childCategories":[{"id":"41","value":"een child 1","parent_id":"40"}]},{"id":"41","value":"een child 1","parent_id":"40","children":"0","childCategories":false}],
	});
	
	bestPictures.initialize();
	
	
	
	$('#cname').typeahead_gm(null, {
	  name: 'best-pictures',
	  displayKey: 'value',
	  highlight :true,
	  source: bestPictures.ttAdapter(),
	  templates: {
				empty: [
				  '<div class="empty-typeahead">',
				  'No results found!',
				  '</div>'
				].join('\n'),
			suggestion: Handlebars.compile('<div class="suggestions" ><span>{{value}}</span></div>'),
		},
	});
	
	$('#cname').bind('typeahead:selected', function(obj, datum, name) {  
		$funcName(obj,datum,name);
	});
	
	 $('#cname').on('typeahead:autocompleted', function(e, d, data_set) {
    
  });