https://forum.papayaplay.com/applications/vanilla/js/tagging.js?v=2022.007

1var discussionTagging = {
2    start: function($element) {
3        var $button = $element.find('form :submit');
4        if ($button) {
5            var $form = $element.find('form');
6            var $tagsInput = $element.find("#Form_Tags");
7
8            $form.bind('BeforeDiscussionSubmit', function (e, $form, $button) {
9                $tagsInput.triggerHandler('BeforeSubmit', [$form]);
10            });
11
12            var tags;
13            var dataTags = $tagsInput.data('tags');
14            if (dataTags) {
15                tags = [];
16                if ($.isPlainObject(dataTags)) {
17                    for (var tagID in dataTags) {
18                        tags.push({name: dataTags[tagID], id: tagID});
19                    }
20                }
21            } else {
22                tags = $tagsInput.val();
23                if (tags && tags.length) {
24                    tags = tags.split(",");
25
26                    for (i = 0; i < tags.length; i++) {
27                        tags[i] = {id: tags[i], name: tags[i]};
28                    }
29                } else {
30                    tags = [];
31                }
32            }
33
34            var tagSearch = gdn.definition('TaggingSearchUrl', gdn.url('tags/search'));
35            var tagAdd = gdn.definition('TaggingAdd', false);
36            var maxTags = gdn.definition('MaxTagsAllowed', false);
37
38            if ($('.Form-Tags').find('.token-input-list').length < 1) {    //tokenInput has already been instantiated
39                $tagsInput.tokenInput(tagSearch, {
40                    hintText: gdn.definition("TagHint", "Start to type..."),
41                    searchingText: '', // search text gives flickery ux, don't like
42                    searchDelay: 300,
43                    animateDropdown: false,
44                    minChars: 1,
45                    maxLength: 25,
46                    prePopulate: tags,
47                    dataFields: ["#Form_CategoryID"],
48                    allowFreeTagging: tagAdd,
49                    tokenLimit: maxTags,
50                    zindex: 3000,
51                    allowTabOut: true,
52                    ariaLabel: gdn.translate("Tag"),
53                });
54             }
55            // Show available link
56            $element.on('click', '.ShowTags a', function () {
57                $element.find('.ShowTags a').hide();
58                $element.find('.AvailableTags').show();
59                return false;
60            });
61
62            // Use available tags
63            $element.on('click', '.AvailableTag', function () {
64                //$(this).hide();
65                var tag = $(this).attr('data-id');
66                $tagsInput.tokenInput('add', {id: tag, name: $(this).text()});
67                return false;
68            });
69        }
70    }
71}
72
73$(document).on('contentLoad', function(e) {
74    window.onVanillaReady(function() {
75        if (e.target.id === 'DiscussionForm') {
76            discussionTagging.start($('.FormWrapper', e.target));
77        } else {
78            var elementID = '#DiscussionForm';
79            if ($(e.target).find('#DiscussionAddTagForm').length) {
80                elementID = '#DiscussionAddTagForm';
81            }
82            discussionTagging.start($(elementID, e.target));
83        }
84    })
85});