JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css">
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>

JavaScript

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
  console.log(cb)
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
     
      var fullname = str.fname + " " + str.lname

			console.log(fullname);

      if (substrRegex.test(fullname)) {
        matches.push(fullname);
      }
    });

    cb(matches);
  };
};

var people = [{
  id: 2,
  fname: "bob",
  lname: "roberts",
  common_name: null,
  email: "[email protected]"
}, {
  id: 1,
  fname: "John",
  lname: "Smith",
  common_name: null,
  email: "[email protected]"
}];

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'people',
  source: substringMatcher(people)
});