Finish working search

src/cg-dropdown.js

@@ -340,6 +340,7 @@ export class DropDown {
    */
   #render(select) {
     const { styles, multiselect, searchMode } = this.#options;
+    const random = Math.random().toString(36).substring(2, 10);
 
     if (select || (select && styles)) {
       this.#initSelected(select);
@@ -349,10 +350,8 @@ export class DropDown {
     }
 
     const ulList = document.createElement('ul');
-    const intputSearch = createInputSearch();
-    // intputSearch.type = 'text';
-    // intputSearch.setAttribute('id', 'searchSelect');
-    // intputSearch.setAttribute('placeholder', 'Search...');
+    const intputSearch = createInputSearch(random);
+    this.random = random;
 
     const nativSelect = createNativeSelect();
 
@@ -532,7 +531,7 @@ export class DropDown {
     }
 
     if (searchMode && searchMode === true) {
-      this.searchMode();
+      this.#searchMode(this.random);
     }
 
     options.forEach((option, index) => {
@@ -615,8 +614,14 @@ export class DropDown {
     });
   }
 
-  searchMode() {
-    const input = document.querySelector('#searchSelect');
+  /**
+   * Метод который реализует поиск элементов в селекте
+   * @protected
+   * @param {string} random уникальное значение для input элемента.
+   * @method #searchMode
+   */
+  #searchMode(random) {
+    const input = this.#element.querySelector(`#searchSelect-${random}`);
     const searchSelect = this.#element.querySelectorAll('.list__item');
     const result = document.createElement('p');
     const textNode = document.createTextNode('No matches...');

src/components/create-element.js

@@ -94,11 +94,17 @@ export function createNativSelectOption() {
   return nativOption;
 }
 
-export function createInputSearch() {
+/**
+ * Метод который создает поиск элементов в селекте
+ * @param {string} random уникальное значение для input элемента.
+ * @returns {HTMLInputElement} Возвращает сформированный input елемент.
+ */
+export function createInputSearch(random) {
   const intputSearch = document.createElement('input');
 
   intputSearch.type = 'text';
-  intputSearch.setAttribute('id', 'searchSelect');
+  intputSearch.classList.add('inputSearch');
+  intputSearch.setAttribute('id', `searchSelect-${random}`);
   intputSearch.setAttribute('placeholder', 'Search...');
 
   return intputSearch;

src/index.html

@@ -14,7 +14,7 @@
 
       <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>
     </div>

src/index.js

@@ -22,24 +22,26 @@ const dropdown = new DropDown({
 
 // dropdown.disabled(false);
 // ------------------------------URL--------------------
-// const dropdown3 = new DropDown({
-//   selector: '.cg-dropdown_three',
-//   placeholder: 'URL',
-//   url: 'http://jsonplaceholder.typicode.com/users',
-//   styles: {
-//     head: {
-//       background: 'black',
-//       width: '350px',
-//     },
-//   },
-//   multiselect: true,
-//   multiselectTag: true,
-// });
+const dropdown3 = new DropDown({
+  selector: '.cg-dropdown_three',
+  placeholder: 'URL',
+  url: 'http://jsonplaceholder.typicode.com/users',
+  searchMode: true,
+  styles: {
+    head: {
+      background: 'black',
+      width: '350px',
+    },
+  },
+  multiselect: true,
+  multiselectTag: true,
+});
 
 // --------------------------------Категории--------------------------
 const dropdown4 = new DropDown({
   selector: '.cg-dropdown_button',
   placeholder: 'Выберите регион',
+  searchMode: true,
   items: [
     {
       category: 'Russia',

src/style/main.scss

@@ -105,6 +105,18 @@ body {
       background: #8282822c;
     }
   }
+
+  .inputSearch {
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid white;
+    margin-top: 5px;
+    margin-bottom: 5px;
+
+    &:focus {
+      outline: none;
+    }
+  }
 }
 
 .multiselect-tag {