JSFiddle - React, Tailwind, and code Playground

by tomsx

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.2.1/typeahead.bundle.min.js"></script>
<link rel="stylesheet" href="https://twitter.github.io/typeahead.js/css/examples.css">

<div id="remote">
  <input class="typeahead" type="text" placeholder="Oscar winners for Best Picture">
</div>

JavaScript

var bestPictures = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: 'https://twitter.github.io/typeahead.js/data/films/post_1960.json',
  remote: {
    url: 'https://twitter.github.io/typeahead.js/data/data/films/queries/%QUERY.json',
    wildcard: '%QUERY'
  }
});

$('#remote .typeahead').typeahead({
  minLength: 3
}, {
  name: 'best-pictures',
  display: 'value',
  source: bestPictures
});