дизайн материала Dynami c чипы с jquery - chipSetEl.appendChild не является функцией - PullRequest
Новая
       24

дизайн материала Dynami c чипы с jquery - chipSetEl.appendChild не является функцией

0 голосов
/ 13 января 2020

Я пытаюсь добавить теги, когда пользователь выбирает опцию из выпадающего списка. Таким образом, они могут выбрать несколько предметов, и тогда под ними будут теги, демонстрирующие выбор.

Моя текущая попытка, пытающаяся получить от: https://material.io/develop/web/components/chips/

 <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">   
<div class="mdc-chip-set mdc-chip-set--input" role="grid"></div>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script type="text/javascript">
  const chipSetEl = mdc.chips.MDCChipSet.attachTo(document.querySelector('.mdc-chip-set'));
  //const chipSet = new mdc.chips.MDCChipSet(chipSetEl);

  $(function() {
    $(document).on("change", '#search_selectWrap', function() {
      const chipEl = document.createElement('div');
      // ... perform operations to properly populate/decorate chip element ...
      chipSetEl.appendChild(chipEl);
      //chipSet.addChip(chipEl);
    });
  });
</script>

Моя ошибка в настоящее время:

chipSetEl.appendChild не является функцией

Однако, если я добавлю раскомментировать инициализацию chipSet, я также получу ошибку:

this.root_.querySelectorAll не является функцией

chipset el console.log:

enter image description here

EDIT

Новое определение chipSetEl и попытка настройки: 

const chipSetEl = document.querySelector('.mdc-chip-set');
const chipSet = new mdc.chips.MDCChipSet(chipSetEl);
console.log(chipSetEl);

$(function()
{
    $(document).on("change", '#search_selectWrap',function ()  {
        const chipEl = document.createElement('div');
        chipEl.shouldRemoveOnTrailingIconClick = true;
        chipEl.innerHTML = "hi";
        chipEl.style["background-color"] = "green"; 
        // ... perform operations to properly populate/decorate chip element ...
        chipSetEl.appendChild(chipEl);
        chipSet.addChip(chipEl);
    });
});
...