Twitter typeahead.js en de WordPress REST API

De Twitter typeahead.js bibliotheek is een goede basis voor het bouwen van een zogenaamde ’typeahead’ functionaliteit. Eindgebruikers kunnen met deze bibliotheek suggesties krijgen zodra ze gaan typen. De bibliotheek bestaat uit 2 componenten: de suggesties motor (Bloodhound) en de gebruikersinterface (Typeahead). In dit bericht is te lezen hoe deze componenten gekoppeld kunnen worden aan de WordPress REST API.

Bloodhound

Zoals ik al aangaf is Bloodhound de typeahead.js suggesties motor. Dat wil zeggen dat via Bloodhound de suggesties worden gegeven. De kracht van Bloodhound is dat het de mogelijkheid heeft om vooraf gegevens in te laden (prefetching). Daarnaast is het ook uitgerust met een intelligent caching mechanisme en kunnen suggesties aangevuld worden via externe bronnen. In dit geval zullen we de WordPress REST API gebruiken als bron voor de suggesties.

Voorbeeld

In HTML

<input id="pronamic-typeahead-example" type="text" />

In JavaScript

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

In bovenstaande voorbeeld moeten we de datasets variabele nog invulling geven. Hier zal Bloodhound om het hoekje komen kijken. De kracht van deze bibliotheek is dat er meerdere databronnen opgegeven kunnen worden. Zo kunnen we bijvoorbeeld tegelijkertijd werken met WordPress categorieën en tags.

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
    }
];

In bovenstaande datasets variabele worden 2 datasets gedefinieerd. Eén voor de WordPress categorieën (/wp-json/wp/v2/categories) en één voor de WordPress tags (/wp-json/wp/v2/tags). Er worden vooraf 20 categorieën en 20 tags ingeladen via de Bloodhound prefetch optie. Dit kan nog verder verhoogd worden via de WordPress REST API per_page optie. Om de typeahead functionaliteit snel te laten functioneren kan het slim zijn om dit op bijvoorbeeld 100 te zetten. De sufficient optie staat ingesteld op 1, daarmee wordt aangegeven dat er niet verder gezocht hoeft te worden in externe databronnen zodra er 1 resultaat gevonden is. Verder wordt er gebruikt gemaakt van 2 maatwerk functies: transform_terms en display_term.

WordPress terms transformeren

De WordPress terms zoals de WordPress REST API die terug geeft moeten getransformeerd worden naar een notatie die Bloodhound begrijpt. De transform_terms functie regelt dit:

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
        };
    } );
};

WordPress term weergeven

De display_term functie zorgt voor de weergave van de term titel in de Typeahead resultaten:

var display_term = function( term ) {
    return term.name;
}

Bovenstaande code resulteert in een tekstveld die suggesties geeft voor WordPress categorieën en tags. Zie als voorbeeld ook de volgende CodePen:

In de praktijk

We hebben recent de Twitter typeahead.js bibliotheek ingezet voor het project KiesUwCursus.nl. Op KiesUwCursus.nl kunnen bezoekers vanaf de beginpagina snel zoeken naar opleidingen en cursussen. Het zoekveld geeft daarbij direct suggesties voor rechtsgebieden, plaatsen en opleiders. Dit werkt razendsnel doordat de bijbehorende WordPress taxonomieën en terms vooraf worden ingeladen door Bloodhound. Neem gerust contact met ons op als je ook een snelle zoek/filter functie wilt laten ontwikkelen voor je WordPress website.