Select2 en de WordPress REST API

Select2 is een op jQuery gebaseerde vervanging voor HTML-keuzelijst (<select>) elementen. De Select2-bibliotheek geeft de mogelijkheid om HTML-keuzelijst elementen uit te breiden. Zo heeft het opties voor zoeken, taggen, externe databronnen, onbeperkt scrollen en meer. Door de beperkingen van een standaard HTML-keuzelijst is Select2 erg populair. Ook binnen WordPress thema’s en plugins wordt deze bibliotheek veel ingezet. In dit bericht is te lezen hoe Select2 ingezet kan worden i.c.m. de WordPress REST API.

WordPress REST API

WordPress is sinds versie 4.7.0 standaard uitgerust met een REST API. Met behulp van de WordPress REST API is het mogelijk om WordPress data in JSON-formaat op te vragen. In het WordPress REST API handboek is hier meer informatie over te vinden. Standaard kan de WordPress REST API aangeroepen worden door /wp-json/ achter je website URL te zetten (bijvoorbeeld: https://demo.wp-api.org/wp-json/. Dit is erg handig omdat veel bibliotheken standaard ondersteuning hebben voor JSON. Zo heeft Select2 ook opties om te werken met een JSON-databron.

Select2 AJAX-ondersteuning

Met behulp van de Select2 AJAX-optie is het mogelijk om een Select2-element te laten zoeken in een externe databron. Op de Select2 AJAX-documentatiepagina geven ze als voorbeeld een koppeling met de GitHub API. Op vergelijkbare manier kunnen we Select2 ook koppelen aan de WordPress REST API:

In HTML

<select class="pronamic-wp-posts-example"></select>

In JavaScript

$( '.pronamic-wp-posts-example' ).select2( {
    ajax: {
        url: 'https://demo.wp-api.org/wp-json/wp/v2/posts',
        dataType: 'json'
    }
} );

Request parameters

Bovenstaande zal nog niet werken omdat Select2 de zoekopdracht standaard doorgeeft via de URL-parameter term. Dit terwijl als je wilt zoeken naar posts via de WordPress REST API de URL-parameter search moet gebruiken. Gelukkig kunnen we dit via de ajax.data optie aangeven:

$( '.pronamic-wp-posts-example' ).select2( {
    ajax: {
        url: 'https://demo.wp-api.org/wp-json/wp/v2/posts',
        dataType: 'json',
        data: function ( params ) {
            return {
                search: params.term
            };
        }
    }
} );

WordPress REST API JSON-antwoord transformeren

De volgende stap is om het JSON-antwoord van de WordPress REST API te transformeren naar een notatie die Select2 begrijpt. Hiervoor kunnen we gebruik maken van de ajax.processResults optie:

$( '.pronamic-wp-posts-example' ).select2( {
    ajax: {
        url: 'https://demo.wp-api.org/wp-json/wp/v2/posts',
        dataType: 'json',
        data: function ( params ) {
            return {
                search: params.term
            };
        },
        processResults: function( data ) {
            return {
                results: jQuery.map( data, function( obj ) {
                    return {
                        id: obj.id,
                        text: obj.title.rendered
                    };
                } )
            }
        }
    }
} );

Bovenstaande code resulteert in een Select2-element waarmee je kunt zoeken naar gepubliceerde WordPress berichten. Zie als voorbeeld ook de volgende CodePen:

Meer opties

Select2 heeft naast de genoemde opties ook nog vele andere opties. Zo kun je bij heel veel data ook paginatie implementeren. Verder is het goed om te realiseren dat dit heel breed ingezet kan worden. Zo kun je naast de /wp-json/wp/v2/posts endpoint ook werken met bijvoorbeeld /wp-json/wp/v2/categories of andere standaard of maatwerk REST API endpoints. Wij zetten dit bijvoorbeeld ook wel in op WordPress archiefpagina’s die voorzien zijn van maatwerk taxonomie/term filters. Neem gerust contact met ons op als je op zoek bent naar een WordPress ontwikkelaar die je hiermee verder kan helpen.