안녕하세요 개발을 하다가 해결되지 않는 문제가 생겨서 질문 올려봅니다.

제가 하려는 것은 이 hashcode 사이트의 질문하기 안에 태그를 검색해서 등록하는 것과 같은 것을 하려고 하는데요.

autocomplete가 구현된 것을 찾다보니 처음에는 jqueryui 에 있는 것을 사용하려고 했습니다. 그런데 그것 css도 따로 해야하고해서, 개인프로젝트로 간단하게만 하려는 중이라서 디자인까지 완전히 잘 구현되어 있는 materializecss를 사용하기로 했습니다.

찾아보니 materialize 에도 autocomplete가 있고, 거기에 chips 컴포넌트랑 autocomplete를 연동..?할 수 있더라구요. 그래서 이걸 이용해서 현재 구현은

• autocomplete 정상 작동
• autocomplete되어 나온 목록에서 하나를 선택하면 chip으로 만들어줌
• chip을 만들 때 hidden input을 통해 서버로 태그 전송 가능

이정도 까지 한 것 같습니다.

그런데 여기서 문제는 아직 존재하지 않는 새로운 tag(chip)은 autocomplete가 되지 않고, chip의 생성도 되지 않는 다는 것입니다. hashcode 사이트에서는 아직 등록되지 않은 태그는 등록 대기중으로 나오면서 chip이 형성이 되는데 저도 이걸 하고 싶은데 어떻게 구현해야할지 모르겠습니다.. materialize에서 제공하는 autocomplete의 함수가 제한적이라서 이걸 하려면 다른걸 사용해야하는 건지...

혹시 몰라 일단 코드도 첨부해봅니다.

$(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();
            });
    });

혹시 이것도 아시는 분이 계실까하여 하나만 추가해봅니다. materialize chips는 클릭을 하면 chip들 중에서 하나만 클릭이 가능한데(radio 버튼처럼?) 하나가 클릭되서 색깔이 변하는 이 과정이 전혀 필요없고 사용자의 ux를 혼란하게 만든다고..? 생각해서 아예 클릭해도 색깔 변화가 없게 만들고 싶은데 혹시 아시는 분 계실까요.... 키워드를 readonly나 이런거 검색해도 안나오는 것 같네요.. ㅠ