Implement autocomplete and chips (tag)

Hello, everyone I'm posting a question because there was a problem that could not be solved while developing.

What I'm going to do is to search for tags in the questionnaire on this hashcode site and register them.

As I looked for the implementation of autocomplete, I tried to use the one in jqueryui at first. But I have to do that css separately, so I'm just trying to do it simply as a personal project, so I decided to use materialize css, which is fully implemented in the design.

I looked it up and found that there is also an autocomplete in materialize, and the chips component and autocomplete are linked to it...?I can do it. So using this, the current implementation is

I think I did it up to here.

But the problem here is that a new tag (chip) that doesn't exist yet doesn't become autocomplete, and it doesn't create a chip. On the hashcode site, tags that have not been registered yet come out waiting for registration and a chip is formed, but I also want to do this, but I don't know how to implement it. The function of autocomplete provided by materialize is limited, so I don't know if I have to use another one to do this...

I'm attaching the code just in case.

$(document).ready(function () {
       var tags = {
          "Apple": null,
          "Microsoft": null,
          "Google": null
       };

        var form = $('#new_link_form');
        var chips = [];

        $('.chips-autocomplete').material_chip({
            autocompleteOptions: {
                data: tags,
                limit: 10,
                minLength: 1,
                onAutocomplete: function (val) {
                    console.log(val);
                }
            },
            placeholder: '+Tag',
            secondaryPlaceholder: 'Enter a tag'
        });
        $('.chips')
            .on('chip.add', function (e, chip) {
                var new_chip = $('<input>').attr({
                    type: 'hidden',
                    name: 'tag[]',
                    value: chip.tag
                });
                form.append(new_chip);
                chips.push(new_chip);
            })
            .on('chip.delete', function (e, chip) {
                var deleted_chip;
                for (var i = 0; i < chips.length; i++) {
                    deleted_chip = $(chips[i]);
                    if (deleted_chip.attr('value') == chip.tag) {
                        chips.splice(i, 1);
                        break;
                    }
                }
                deleted_chip.detach();
            });
    });

I'm going to add one more thing just in case anyone knows this. Materialize chips can only click on one of the chips (like a radio button?), but there is no need for this process of changing the color by clicking on one, and it confuses the user's ux? I want to think about it and make it so that there is no color change even if I click it at all, but is there anyone who knows... I don't think it comes out even if I search for keywords readly or something. <