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

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に設定している程度です。

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

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


開発

まずはHTML側 <select id="select2"></select> 次にjavascript <script> jQuery(document).rea…


関連する記事



こちらはいかが?


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*(必須)

*(必須・表示されません)