<div class="container p-3">
	<h2>Twitter typeahead.js and the WordPress REST API</h2>

	<form>
		<div class="form-group">
			<label for="pronamic-typeahead-example">Post</label>

			<input id="pronamic-typeahead-example" class="form-control" />
		</div>
	</form>
</div>

jQuery( document ).ready( function( $ ) {
    var display_term = function( term ) {
        return term.name;
    }
    
    var transform_terms = function( terms ) {
        return $.map( terms, function( term ) {
            return {
                id: term.id,
                name: term.name,
                description: term.description,
                count: term.count,
                link: term.link
            };
        } );
    };

    var datasets = [
        {
            name: 'categories',
            source: new Bloodhound( {
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace( [ 'name', 'description' ] ),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                identify: function( term ) {
                    return term.id;
                },
                sufficient: 1,
                prefetch: {
                    url: 'https://demo.wp-api.org/wp-json/wp/v2/categories?per_page=20',
                    cacheKey: 'categories',
                    transform: transform_terms
                },
                remote: {
                    url: 'https://demo.wp-api.org/wp-json/wp/v2/categories?search=%QUERY',
                    wildcard: '%QUERY',
                    transform: transform_terms
                },
                indexRemote: true
            } ),
            display: display_term
        },
        {
            name: 'tags',
            source: new Bloodhound( {
                datumTokenizer: Bloodhound.tokenizers.obj.whitespace( [ 'name', 'description' ] ),
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                identify: function( term ) {
                    return term.id;
                },
                sufficient: 1,
                prefetch: {
                    url: 'https://demo.wp-api.org/wp-json/wp/v2/tags?per_page=20',
                    cacheKey: 'tags',
                    transform: transform_terms
                },
                remote: {
                    url: 'https://demo.wp-api.org/wp-json/wp/v2/tags?search=%QUERY',
                    wildcard: '%QUERY',
                    transform: transform_terms
                },
                indexRemote: true
            } ),
            display: display_term
        }
    ];

    $( '#pronamic-typeahead-example' ).typeahead( {
        minLength: 2,
        highlight: true
    }, datasets );
} );