開発

WordPressのREST APIでSelect2のajaxリモートデータ取得に使ってみる。


まずはHTML側

<select id="select2"></select>

次にjavascript

<script>
jQuery(document).ready(function($) { 
    $('#select2').select2({
        placeholder: '選択して下さい。',
        width: '350px',
        minimumInputLength: 1,
        multiple: false,
        allowClear: true,
        language: 'ja',        
        ajax: {
            url: '/wp-json/wp/v2/posts',
            dataType: 'json',
            delay: 50,
            data: function(params){
                return { 
                    search: params.term 
                };
            },
            processResults: function (data, params) {
                return { 
                    results: $.map(data, function(obj) {
                        return { 
                            id: obj.id, text: obj.title.rendered 
                        };
                    })
                };
            },
        }
    });     
});
</script>

URLをREST APIの出力先に設定して、取得する際にタイトルはtitle.renderedに設定している程度です。


タグ: jQuery select2 WordPress

コメントを残す