JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/typeahead.js/css/examples.css">
<div class="example-numbers test2" id="test" name="test">
  <input class="typeahead" type="text" placeholder="numbers (one through ten)">
</div>

JavaScript

// instantiate the bloodhound suggestion engine
var numbers = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: [
    { num: 'one' },
    { num: 'two' },
    { num: 'three' },
    { num: 'four' },
    { num: 'five' },
    { num: 'six' },
    { num: 'seven' },
    { num: 'eight' },
    { num: 'nine' },
    { num: 'ten' }
  ]
});
 
// initialize the bloodhound suggestion engine
numbers.initialize();
 
// instantiate the typeahead UI
$('.example-numbers .typeahead').typeahead(null, {
  displayKey: 'num',
  source: numbers.ttAdapter()
});

$('.test2 .typeahead').typeahead('val','ten');