JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<script src="http://twitter.github.io/typeahead.js/js/handlebars.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/typeahead.js/css/examples.css">
<div id="custom-templates">
  <input class="typeahead" type="text" placeholder="companies">
</div>

JavaScript

var links = [{name: "abc", link: "http://abc.com"}, 
             {name: "nbc", link: "http://nbc.com"}];

var source = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: links
});

source.initialize();

$('#custom-templates .typeahead').typeahead(null, {
  name: 'matched-links',
  displayKey: 'name',
  source: source.ttAdapter(),
  templates: {
    empty: [
      '<div class="empty-message">',
      'unable to find any company that match current query',
      '</div>'
    ].join('\n'),
      suggestion: Handlebars.compile('<p><a href="{{link}}">{{name}}</a></p>')
  }
});