Search in the working!

src/cg-dropdown.js

@@ -5,10 +5,10 @@ import {
   customStylesFormat,
   nativOptionMultiple,
   nativOptionOrdinary,
-  createSelectedSearch,
 } from './components/utils';
 import {
   createBreadcrumb,
+  createInputSearch,
   createNativSelectOption,
   createNativeSelect,
 } from './components/create-element';
@@ -312,9 +312,8 @@ export class DropDown {
    * @protected
    */
   #initSelected(select) {
-    const { styles, selected, placeholder, searchMode } = this.#options;
+    const { styles, selected, placeholder } = this.#options;
 
-    console.log(searchMode);
     if (selected) {
       createSelected(this.#element, selected);
     } else if (placeholder) {
@@ -323,9 +322,6 @@ export class DropDown {
       createSelected(this.#element, 'Select...');
     }
 
-    if (searchMode) {
-      createSelectedSearch(this.#element);
-    }
     if (styles) {
       customStyles(this.#element, styles);
     }
@@ -343,7 +339,7 @@ export class DropDown {
    * @description Рендер елементов в селекте.
    */
   #render(select) {
-    const { styles, multiselect } = this.#options;
+    const { styles, multiselect, searchMode } = this.#options;
 
     if (select || (select && styles)) {
       this.#initSelected(select);
@@ -353,9 +349,17 @@ export class DropDown {
     }
 
     const ulList = document.createElement('ul');
+    const intputSearch = createInputSearch();
+    // intputSearch.type = 'text';
+    // intputSearch.setAttribute('id', 'searchSelect');
+    // intputSearch.setAttribute('placeholder', 'Search...');
+
     const nativSelect = createNativeSelect();
 
     ulList.classList.add('list');
+    if (searchMode) {
+      ulList.appendChild(intputSearch);
+    }
 
     if (styles) {
       const { list } = styles;
@@ -515,12 +519,11 @@ export class DropDown {
    * @method #addOptionsBehaviour
    */
   #addOptionsBehaviour() {
-    const { multiselect, placeholder, selected, multiselectTag } = this.#options;
+    const { multiselect, placeholder, selected, multiselectTag, searchMode } = this.#options;
 
     const options = this.#element.querySelectorAll('.list__item');
     const select = this.#element.querySelector('.selected');
     const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
-    const search = this.#element.querySelector('#searchSelect');
     const ulMultipul = document.createElement('ul');
 
     if (multiselect) {
@@ -528,8 +531,9 @@ export class DropDown {
       select.classList.add('overflow-hidden');
     }
 
-    // console.log(search);
+    if (searchMode && searchMode === true) {
       this.searchMode();
+    }
 
     options.forEach((option, index) => {
       option.addEventListener('click', (event) => {
@@ -612,15 +616,27 @@ export class DropDown {
   }
 
   searchMode() {
-    document.querySelector('#searchSelect').oninput = function () {
+    const input = document.querySelector('#searchSelect');
+    const searchSelect = this.#element.querySelectorAll('.list__item');
+    const result = document.createElement('p');
+    const textNode = document.createTextNode('No matches...');
+
+    result.appendChild(textNode);
+    result.classList.add('displayHide');
+    input.parentElement.appendChild(result);
+
+    input.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
+
+    input.oninput = function () {
       let val = this.value.trim();
-      let searchSelect = document.querySelectorAll('.list__item');
-      console.log(searchSelect);
 
       if (val != '') {
         searchSelect.forEach((elem) => {
           if (elem.innerText.search(val) == -1) {
             elem.classList.add('displayHide');
+            result.classList.remove('displayHide');
           } else {
             elem.classList.remove('displayHide');
           }
@@ -628,10 +644,12 @@ export class DropDown {
       } else {
         searchSelect.forEach((elem) => {
           elem.classList.remove('displayHide');
+          result.classList.add('displayHide');
         });
       }
     };
   }
+
   /**
    * Приватный метод экземпляра класса DropDown
    * @protected

src/components/create-element.js

@@ -93,3 +93,13 @@ export function createNativSelectOption() {
   nativOption.classList.add('nativSelect__nativOption');
   return nativOption;
 }
+
+export function createInputSearch() {
+  const intputSearch = document.createElement('input');
+
+  intputSearch.type = 'text';
+  intputSearch.setAttribute('id', 'searchSelect');
+  intputSearch.setAttribute('placeholder', 'Search...');
+
+  return intputSearch;
+}

src/components/utils.js

@@ -31,23 +31,6 @@ export function createSelected(element, content, styles) {
   }
 }
 
-export function createSelectedSearch(element) {
-  if (element) {
-    element.innerHTML = `
-    <div class="cg-select">
-        <div class="searchSelect">
-            <p class="selected"></p>
-            <textarea autofocus type="text" id="searchSelect" ></textarea>
-            
-        </div>
-        <div class="caret"></div>
-    </div>
-  `;
-  } else {
-    return;
-  }
-}
-
 /**
  * Поиск и стилизация елементов полученных из styles экземпляра DropDown
  * @param {HTMLElement} element созданный экземпляр класса DropDown

src/index.html

@@ -14,9 +14,9 @@
 
       <button class="cg-dropdown cg-dropdown_one"></button>
       <!-- <input type="submit" form="data" value="Отправить" /> -->
-      <button class="cg-dropdown cg-dropdown_three"></button>
+      <!-- <button class="cg-dropdown cg-dropdown_three"></button> -->
 
-      <!-- <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button> -->
+      <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
     </div>
   </body>
   <script type="module" src="index.js"></script>

src/index.js

@@ -3,7 +3,7 @@ import { DropDown } from './cg-dropdown';
 // ------------------------------Обычный селект--------------------
 const dropdown = new DropDown({
   selector: '.cg-dropdown_one',
-  // placeholder: 'Выберите авто',
+  placeholder: 'Выберите авто',
   searchMode: true,
   items: [
     'BMW',
@@ -37,48 +37,48 @@ const dropdown = new DropDown({
 // });
 
 // --------------------------------Категории--------------------------
-// const dropdown4 = new DropDown({
+const dropdown4 = new DropDown({
-//   selector: '.cg-dropdown_button',
+  selector: '.cg-dropdown_button',
-//   placeholder: 'Выберите регион',
+  placeholder: 'Выберите регион',
-//   items: [
+  items: [
-//     {
+    {
-//       category: 'Russia',
+      category: 'Russia',
-//       categoryItems: [
+      categoryItems: [
-//         {
+        {
-//           id: '28qwds',
+          id: '28qwds',
-//           title: 'Москва',
+          title: 'Москва',
-//           value: 0,
+          value: 0,
-//         },
+        },
-//         ,
+        ,
-//         'Ростов-на-дону',
+        'Ростов-на-дону',
-//         'Саратов',
+        'Саратов',
-//         'Волгоград',
+        'Волгоград',
-//         'Донецк',
+        'Донецк',
-//       ],
+      ],
-//     },
+    },
-//     {
+    {
-//       category: 'USA',
+      category: 'USA',
-//       categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
+      categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
-//     },
+    },
-//     {
+    {
-//       category: 'France',
+      category: 'France',
-//       categoryItems: ['Paris'],
+      categoryItems: ['Paris'],
-//     },
+    },
-//   ],
+  ],
-//   styles: {
+  styles: {
-//     head: {
+    head: {
-//       background: 'red',
+      background: 'red',
-//     },
+    },
-//     list: {
+    list: {
-//       background: 'green',
+      background: 'green',
-//     },
+    },
-//     chips: {
+    chips: {
-//       background: 'blue',
+      background: 'blue',
-//     },
+    },
-//   },
+  },
-//   multiselect: true,
+  multiselect: true,
-//   multiselectTag: true,
+  multiselectTag: true,
-// });
+});
 
 //----------------управление с помощью кнопок----------------------------------
 /* const buttonOpen = document.querySelector('.button__open');

src/style/main.scss

@@ -214,22 +214,3 @@ input[type='checkbox'] {
 .displayHide {
   display: none;
 }
-
-.searchSelect {
-  // border: solid black 1px;
-  // border-radius: 5px;
-  display: flex;
-  align-items: center;
-  // width: 150px;
-  // height: 45px;
-
-  textarea {
-    width: 0.75em;
-    resize: none;
-    height: 18px;
-    background: transparent;
-    border: none;
-    outline: 0;
-    box-shadow: none;
-  }
-}