jQueryのプラグインであるselect2で、ユーザーが入力した単語をもとに検索結果を動的に提示するためにajax通信を用いた。
いくつかのサイトを参考にしたが、動かないものや部分的にしか書かれていないものがあったので自分の環境でうまくいったものを残しておく。


jQuery('#id_hogehoge').select2({ ajax: { type: 'POST', url: "/wp-admin/admin-ajax.php", dataType: "json", delay: 250, data: function (params) { // paramsに検索文字列が自動的に入ってくる return { 'action': 'execute_hoge',// 実行したい関数名 'params': params, // 関数への引数 } }, processResults: function (data) { //関数の返り値がdataに入る var results = []; data.forEach(function(val){ results.push({id: val['id'], text: val['name']}); //[{id: 1, text: 'hoge'}]のような形式で与える必要があるらしい }); return { results: results }; } }, minimumInputLength: 1, placeholder: "選択してください。", language: { // デフォルトで英語だが好きな文字列に変更できる "noResults": function () { return "見つかりません。"; }, "inputTooShort": function() { return "検索します。"; }, }, escapeMarkup: function (markup) { return markup; } });

関連記事