JSFiddle - React, Tailwind, and code Playground

by Ahmad Sharif

HTML

<script src="https://twitter.github.io/typeahead.js/releases/0.10.5/typeahead.bundle.js"></script>
<input class="typeahead-place">

JavaScript

var places = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: 'https://gist.githubusercontent.com/anonymous/e8ca65322a3aad43eff4/raw/d6b96b394ea4630639332ddaf40b98a9685110fc/blob.json',
        filter: function(data) {
            return data.response;
        }
    }
});

places.initialize();

var selected = false;
$('.typeahead-place').typeahead({
    hint: true,
    highlight: true,
    minLength: 2
}, {
    name: 'places',
    source: places.ttAdapter(),
    displayKey: function (obj) {
        if (obj.url != null && obj.url.length && (obj.street == null || obj.street.length == 0)) {
            return obj.name + " (Online store)";
        }
        return obj.name + " (" + obj.street + ", " + obj.city + ", " + obj.postcode + ")";
    }
});