Chrome 拡張から Craft CMS に投稿するときにタグをサジェストできるようにする

Chrome 拡張のエントリの続き。

Element API をつかってタグ一覧を取得できるようにする

Element API のエンドポイントに以下を追加する。

'tags.json' => function() {
    return [
        'elementType' => Tag::class,
        'paginate' => false,
        'transformer' => function(Tag $tag) {
            return [
                'title' => $tag->title,
                'id' => $tag->id,
            ];
        },
    ];
},

'paginate' => false, を追加しないと100件でわかれてしまうので入れておく。
件数が多いと話は別なのでその変は調整。

craftcms/element-api: Create a JSON API/Feed for your elements in Craft.
https://github.com/craftcms/el...

最初の方に以下も追加。

use craft\elements\Tag;

タグクエリ | Craft 3 ドキュメント
https://docs.craftcms.com/v3/j...

これで以下のURLでタグの一覧にアクセスできるようになる。

https://note.mersy418.com/tags.json

タグをサジェストできるようにする

とりあえずサジェストできればいい、ってことで、、、jQuery UI とかを読み込ませつつ。。。。

Autocomplete | jQuery UI
https://jqueryui.com/autocompl...

manifest.json

{
  "name": "PostCraft",
  "version": "1.1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_title": "PostCraft",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "css": [
        "jquery-ui.theme.min.css"
      ],
      "js": [
        "jquery.min.js",
        "popup.js",
        "jquery-ui.min.js"
      ]
    }
  ]
}</all_urls>

popup.html にサジェスト用のタグ欄を追加。

<div class="form-group">
<label for="rel_tags">Tag</label>
<input type="search" id="rel_tags" name="fields[contentTag][]" placeholder="tag select" size="100" maxlengh="50" value="">
</div>

そのうえで、 popup.js に以下を追加

$("#rel_tags").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "https://note.mersy418.com/tags.json",
      dataType: "json",
      success: function (data) {
        console.log(data);
        var tag_val = $("#rel_tags").val();
        response($.map(data.data, function (item) {
            //filtering results....
            if (item.title.indexOf(tag_val) != -1) {
                return {
                  label: item.title,
                  value: item.id
                };
            }
        }));
      }
    });
  }
});

Jquery Autocomplete from json list all elements - Stack Overflow
https://stackoverflow.com/ques...

Craft CMS の Guest Entries 経由でタグを登録するときは title ではなくて id を投げる必要がある。

検索はタイトルで表示がidとか見た目がダサいので選択した値と裏で投げる値は別で持たせておきつつやるのが良さそうだけどその辺はまた今度にでも。

vue.js とか覚えたらまたそれっぽくなったりするのかどうなのか。