Working as multiselectTag

src/cg-dropdown.js

@@ -207,6 +207,10 @@ export class DropDown {
       const li = document.createElement('li');
       const text = document.createTextNode(item.title);
 
+      const checkBox = document.createElement('input');
+      checkBox.type = 'checkbox';
+      li.appendChild(checkBox);
+
       li.classList.add('list__item');
       li.appendChild(text);
       ul.appendChild(li);
@@ -231,15 +235,34 @@ export class DropDown {
   }
 
   #addOptionsBehaviour() {
-    const { multiselect, placeholder } = this.#options;
+    const { multiselect, placeholder, multiselectTag } = this.#options;
 
     const options = this.#element.querySelectorAll('.list__item');
     const selected = this.#element.querySelector('.selected');
 
+    const ul = document.createElement('ul');
+
     options.forEach((option, index) => {
       option.addEventListener('click', (event) => {
         const item = this.#items[index];
 
+        const li = document.createElement('li');
+        const btn = document.createElement('button');
+        const text = document.createTextNode('X');
+
+        // let textLi = document.createTextNode(item);
+        // t.toString();
+        // console.log(textLi);
+
+        btn.appendChild(text);
+        btn.addEventListener('click', () => {
+          console.log('aaaa');
+          ul.removeChild(li);
+        });
+
+        ul.classList.add('multiselectTag');
+        console.log(ul);
+
         if (multiselect) {
           event.stopPropagation();
           option.classList.toggle('active');
@@ -255,8 +278,23 @@ export class DropDown {
 
             if (checkIndex === -1) {
               this.#indexes.push(index);
-              this.#value.push(item);
-              selected.innerText = this.#value;
+
+              if (this.#checkItemStruct(item)) {
+                this.#value.push(item.title);
+              } else {
+                let textLi = document.createTextNode(item);
+                li.appendChild(textLi);
+                li.appendChild(btn);
+                ul.appendChild(li);
+
+                this.#value.push(item);
+              }
+
+              // selected.innerText = this.#value;
+
+              selected.innerText = '';
+              selected.appendChild(ul);
+
               return;
             }
 

src/index.js

@@ -5,8 +5,7 @@ const dropdown = new DropDown({
   placeholder: 'Выберите авто',
   items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
   multiselect: true,
-  itemSelected: (item, index) => {},
-  itemRemoved: (item, index) => {},
+  multiselectTag: true,
 });
 
 dropdown.addItem('ZAZ');
@@ -28,26 +27,37 @@ const dropdown2 = new DropDown({
     },
     {
       id: '24qwds',
-      title: 'Kamaz',
+      title: 'Kamaz 258',
       value: '3',
     },
+    {
+      id: '28wds',
+      title: 'MAN',
+      value: '4',
+    },
+    {
+      id: '28qwds',
+      title: 'BOOT',
+      value: '5',
+    },
   ],
+  multiselect: true,
 });
 
 setTimeout(() => {
-  console.log(dropdown.value);
+  console.log(dropdown2.value);
 }, 10000);
 setTimeout(() => {
-  console.log(dropdown.indexes);
+  console.log(dropdown2.indexes);
 }, 10000);
-// let a = dropdown2.getValue();
-// console.log(a);
+
 //ToDo: paste the desired url;
 
 const dropdown3 = new DropDown({
   selector: '.cg-dropdown3',
   placeholder: 'URL',
   url: 'http://jsonplaceholder.typicode.com/users',
+  multiselect: true,
 });
 
 // const dropdown3 = new DropDown({

src/style/main.scss

@@ -21,17 +21,26 @@ body {
 .cg-select {
   padding: 14px;
   min-width: 200px;
+  max-width: 200px;
   height: 30px;
   color: #fff;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
+  overflow: hidden;
+  text-overflow: ellipsis;
   background: #2a2f3b;
   cursor: pointer;
   border-radius: 5px;
   transition: 0.5s;
 
+  .selected {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   &:hover {
     transition: 0.5s;
     background: #394050;
@@ -119,6 +128,14 @@ body {
   z-index: 999;
 }
 
+.multiselectTag {
+  display: flex;
+  text-decoration: none;
+  flex-direction: row;
+  height: 15px;
+  list-style-type: none;
+}
+
 input[type='checkbox'] {
   cursor: pointer;
 }