Finish working search

2022-10-25 21:03:10 +03:00 · 2022-10-25 21:03:10 +03:00 · 482b3799d2
commit 482b3799d2
parent 19a857280d
14 changed files with 1100 additions and 807 deletions
--- a/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
+++ b/documentation/%D0%9A%D0%BE%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D0%BE%D1%80%20%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html
@ -127,6 +127,7 @@
        <li><a href="global.html#open">#open</a></li>
        <li><a href="global.html#render">#render</a></li>
        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+        <li><a href="global.html#searchMode">#searchMode</a></li>
      </ul>
      <h3>Public methods</h3>
      <ul>
--- a/documentation/DropDown.html
+++ b/documentation/DropDown.html
@ -137,6 +137,7 @@
        <li><a href="global.html#open">#open</a></li>
        <li><a href="global.html#render">#render</a></li>
        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+        <li><a href="global.html#searchMode">#searchMode</a></li>
      </ul>
      <h3>Public methods</h3>
      <ul>
--- a/documentation/cg-dropdown.js.html
+++ b/documentation/cg-dropdown.js.html
--- a/documentation/create-element.js.html
+++ b/documentation/create-element.js.html
@ -21,75 +21,117 @@
        <article>
          <pre
            class="prettyprint source linenums"
-          ><code>import { customStylesFormat } from './utils';
-/**
- * @module createElementChips
- */
+          ><code>import { customStylesFormat, nativOptionMultiple } from './utils';
+            /**
+             * @module createBreadcrumb
+             */
            
-/**
- * Метод который создает и отвечает за поведение chips
- * @param {object} data объект в котором содержатся настройки и элементы селекта
- * @param {string} title имя выбранного элемента для отрисовки chips
- * @param {number} index индекс выбранного элемента для отрисовки chips
- * @param {string} id уникальное id выбранного элемента
- * @returns {HTMLElement} возвращает сформированный HTMLElement chips item
- */
-export function createBreadcrumb(data, title, index, id) {
-  const { element, option, indexes, selectedItems } = data;
-  const { placeholder, styles } = option;
+            /**
+             * Метод который создает и отвечает за поведение chips
+             * @param {object} data объект в котором содержатся настройки и элементы селекта
+             * @param {string} title имя выбранного элемента для отрисовки chips
+             * @param {number} index индекс выбранного элемента для отрисовки chips
+             * @param {string} id уникальное id выбранного элемента
+             * @returns {HTMLElement} возвращает сформированный HTMLElement chips item
+             */
+            export function createBreadcrumb(data, title, index, id) {
+              const { element, option, indexes, selectedItems } = data;
+              const { placeholder, styles } = option;
            
-  const selected = element.querySelector('.selected');
-  const liChip = document.createElement('li');
-  const textNode = document.createTextNode(title);
-  const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+              const selected = element.querySelector('.selected');
+              const nativOption = element.querySelectorAll('.nativSelect__nativOption');
            
-  svgIcon.setAttribute('viewBox', '0 0 10 10');
-  path1.setAttribute('d', 'M3,7 L7,3');
-  path2.setAttribute('d', 'M3,3 L7,7');
-  liChip.setAttribute('id', `tag-${index}-${id}`);
+              const liChip = document.createElement('li');
+              const textNode = document.createTextNode(title);
+              const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+              const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+              const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            
-  svgIcon.classList.add('svg-icon');
+              svgIcon.setAttribute('viewBox', '0 0 10 10');
+              path1.setAttribute('d', 'M3,7 L7,3');
+              path2.setAttribute('d', 'M3,3 L7,7');
+              liChip.setAttribute('id', `tag-${index}-${id}`);
            
-  svgIcon.appendChild(path1);
-  svgIcon.appendChild(path2);
-  liChip.appendChild(textNode);
-  liChip.appendChild(svgIcon);
+              svgIcon.classList.add('svg-icon');
            
-  if (styles) {
-    const { chips } = styles;
-    customStylesFormat(chips, liChip);
-  }
+              svgIcon.appendChild(path1);
+              svgIcon.appendChild(path2);
+              liChip.appendChild(textNode);
+              liChip.appendChild(svgIcon);
            
-  svgIcon.addEventListener('click', (event) => {
-    event.stopPropagation();
+              if (styles) {
+                const { chips } = styles;
+                customStylesFormat(chips, liChip);
+              }
            
-    const deleteIcon = indexes.indexOf(index);
+              svgIcon.addEventListener('click', (event) => {
+                event.stopPropagation();
+                nativOptionMultiple(nativOption, title, false);
            
-    indexes.splice(deleteIcon, 1);
-    selectedItems.splice(deleteIcon, 1);
+                const deleteIcon = indexes.indexOf(index);
+                let checkBox = '';
            
-    let checkBox = '';
+                indexes.splice(deleteIcon, 1);
+                selectedItems.splice(deleteIcon, 1);
            
-    if (id) {
-      checkBox = document.getElementById(`chbox-${id}`);
-    } else {
-      checkBox = document.getElementById(`chbox-${index}`);
-    }
+                if (id) {
+                  checkBox = document.getElementById(`chbox-${id}`);
+                } else {
+                  checkBox = document.getElementById(`chbox-${index}`);
+                }
            
-    checkBox.checked = false;
-    checkBox.parentElement.classList.remove('active');
+                checkBox.checked = false;
+                checkBox.parentElement.classList.remove('active');
            
-    if (!selectedItems.length) {
-      selected.innerText = placeholder;
-    }
+                if (!selectedItems.length) {
+                  selected.innerText = placeholder;
+                }
            
-    liChip.parentElement.removeChild(liChip);
-  });
+                liChip.parentElement.removeChild(liChip);
+              });
            
-  return liChip;
-}
+              return liChip;
+            }
+            
+            /**
+             * Метод который создает нативный селект
+             * @returns {HTMLSelectElement} Возвращает созданный нативный селект
+             */
+            export function createNativeSelect() {
+              const nativSelect = document.createElement('select');
+            
+              nativSelect.setAttribute('form', 'data');
+              nativSelect.setAttribute('name', 'dataSelect');
+              nativSelect.classList.add('nativSelect');
+              return nativSelect;
+            }
+            
+            /**
+             * Метод который создает Options для нативного селекта
+             * @returns {HTMLOptionElement} Возвращает созданные Options нативного селекта
+             */
+            export function createNativSelectOption() {
+              const nativOption = document.createElement('option');
+            
+              nativOption.classList.add('nativSelect__nativOption');
+              return nativOption;
+            }
+            
+            /**
+             * Метод который создает поиск элементов в селекте
+             * @param {string} random уникальное значение для input элемента.
+             * @returns {HTMLInputElement} Возвращает сформированный input елемент.
+             */
+            export function createInputSearch(random) {
+              const intputSearch = document.createElement('input');
+            
+              intputSearch.type = 'text';
+              intputSearch.classList.add('inputSearch');
+              intputSearch.setAttribute('id', `searchSelect-${random}`);
+              intputSearch.setAttribute('placeholder', 'Search...');
+            
+              return intputSearch;
+            }
 </code></pre>
        </article>
      </section>
@ -122,6 +164,7 @@ export function createBreadcrumb(data, title, index, id) {
        <li><a href="global.html#open">#open</a></li>
        <li><a href="global.html#render">#render</a></li>
        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+        <li><a href="global.html#searchMode">#searchMode</a></li>
      </ul>
      <h3>Public methods</h3>
      <ul>
--- a/documentation/global.html
+++ b/documentation/global.html
@ -301,6 +301,52 @@
            </dd>
          </dl>

+          <h4 class="name" id="searchMode">
+            <span class="type-signature">(protected) </span>#searchMode<span class="signature"
+              >(random)</span
+            ><span class="type-signature"></span>
+          </h4>
+
+          <div class="description">Метод который реализует поиск элементов в селекте</div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>random</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">уникальное значение для input элемента.</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
+                  <a href="cg-dropdown.js.html#line617">line 617</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
          <h4 class="name" id="addItem">
            <span class="type-signature"></span>addItem<span class="signature">(item)</span
            ><span class="type-signature"></span>
@ -657,6 +703,7 @@
        <li><a href="global.html#open">#open</a></li>
        <li><a href="global.html#render">#render</a></li>
        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+        <li><a href="global.html#searchMode">#searchMode</a></li>
      </ul>
      <h3>Public methods</h3>
      <ul>
--- a/documentation/index.html
+++ b/documentation/index.html
@ -47,6 +47,7 @@
        <li><a href="global.html#open">#open</a></li>
        <li><a href="global.html#render">#render</a></li>
        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+        <li><a href="global.html#searchMode">#searchMode</a></li>
      </ul>
      <h3>Public methods</h3>
      <ul>
--- a/documentation/module-Utils.html
+++ b/documentation/module-Utils.html
@ -379,6 +379,7 @@
        <li><a href="global.html#open">#open</a></li>
        <li><a href="global.html#render">#render</a></li>
        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+        <li><a href="global.html#searchMode">#searchMode</a></li>
      </ul>
      <h3>Public methods</h3>
      <ul>
--- a/documentation/module-createElementChips.html
+++ b/documentation/module-createElementChips.html
@ -114,6 +114,63 @@
            </dd>
          </dl>

+          <h4 class="name" id=".createInputSearch">
+            <span class="type-signature">(static) </span>createInputSearch<span class="signature"
+              >(random)</span
+            ><span class="type-signature"> &rarr; {HTMLInputElement}</span>
+          </h4>
+
+          <div class="description">Метод который создает поиск элементов в селекте</div>
+
+          <h5>Parameters:</h5>
+
+          <table class="params">
+            <thead>
+              <tr>
+                <th>Name</th>
+
+                <th>Type</th>
+
+                <th class="last">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="name"><code>random</code></td>
+
+                <td class="type">
+                  <span class="param-type">string</span>
+                </td>
+
+                <td class="description last">уникальное значение для input элемента.</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <dl class="details">
+            <dt class="tag-source">Source:</dt>
+            <dd class="tag-source">
+              <ul class="dummy">
+                <li>
+                  <a href="create-element.js.html">create-element.js</a>,
+                  <a href="create-element.js.html#line102">line 102</a>
+                </li>
+              </ul>
+            </dd>
+          </dl>
+
+          <h5>Returns:</h5>
+
+          <div class="param-desc">Возвращает сформированный input елемент.</div>
+
+          <dl>
+            <dt>Type</dt>
+            <dd>
+              <span class="param-type">HTMLInputElement</span>
+            </dd>
+          </dl>
+
          <h4 class="name" id=".createNativeSelect">
            <span class="type-signature">(static) </span>createNativeSelect<span class="signature"
              >()</span
@ -192,21 +249,25 @@
          >
        </li>
      </ul>
-      <h3>Module</h3>
+      <h3>Modules</h3>
      <ul>
        <li><a href="module-Utils.html">Utils</a></li>
        <li><a href="module-createElementChips.html">createElementChips</a></li>
      </ul>
-      <h3>Global</h3>
+      <h3>Private methods</h3>
+      <ul>
+        <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
+        <li><a href="global.html#close">#close</a></li>
+        <li><a href="global.html#init">#init</a></li>
+        <li><a href="global.html#initEvent">#initEvent</a></li>
+        <li><a href="global.html#initSelected">#initSelected</a></li>
+        <li><a href="global.html#open">#open</a></li>
+        <li><a href="global.html#render">#render</a></li>
+        <li><a href="global.html#renderUrl">#renderUrl</a></li>
+        <li><a href="global.html#searchMode">#searchMode</a></li>
+      </ul>
+      <h3>Public methods</h3>
      <ul>
-        <li><a href="global.html##addOptionsBehaviour">#addOptionsBehaviour</a></li>
-        <li><a href="global.html##close">#close</a></li>
-        <li><a href="global.html##init">#init</a></li>
-        <li><a href="global.html##initEvent">#initEvent</a></li>
-        <li><a href="global.html##initSelected">#initSelected</a></li>
-        <li><a href="global.html##open">#open</a></li>
-        <li><a href="global.html##render">#render</a></li>
-        <li><a href="global.html##renderUrl">#renderUrl</a></li>
        <li><a href="global.html#addItem">addItem</a></li>
        <li><a href="global.html#buttonControl">buttonControl</a></li>
        <li><a href="global.html#deleteItem">deleteItem</a></li>
--- a/documentation/utils.js.html
+++ b/documentation/utils.js.html
@ -20,122 +20,151 @@
      <section>
        <article>
          <pre class="prettyprint source linenums"><code>/**
- * Utils module
- * @module Utils;
- */
+            * Utils module
+            * @module Utils
+            */
           
-/**
- * Создание кнопки выбора элементов
- * @param {HTMLElement} element созданный экземпляр класса DropDown
- * @param {string} content placeholer передаваемый из настроек селекта
- * @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
- */
-export function createSelected(element, content, styles) {
-  if (content) {
-    element.innerHTML = `
-      &lt;div class="cg-select">
-         &lt;p class="selected">${content}&lt;/p>
-          &lt;div class="caret">&lt;/div>
-       &lt;/div>
-      `;
-  }
+           /**
+            * Создание кнопки выбора элементов
+            * @param {HTMLElement} element созданный экземпляр класса DropDown
+            * @param {string} content placeholer передаваемый из настроек селекта
+            * @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
+            */
+           export function createSelected(element, content, styles) {
+             if (content) {
+               element.innerHTML = `
+                 &lt;div class="cg-select">
+                    &lt;p class="selected">${content}&lt;/p>
+                     &lt;div class="caret">&lt;/div>
+                  &lt;/div>
+                 `;
+             }
           
-  if (styles) {
-    customStyles(element, styles);
+             if (styles) {
+               customStyles(element, styles);
           
-    element.innerHTML = `
-      &lt;div class="cg-select" style = "${styles}">
-          &lt;p class="selected" style = "${styles}">${content}&lt;/p>
-          &lt;div class="caret" style = "${styles}">&lt;/div>
-      &lt;/div>
-    `;
-  }
-}
+               element.innerHTML = `
+                 &lt;div class="cg-select" style = "${styles}">
+                     &lt;p class="selected" style = "${styles}">${content}&lt;/p>
+                     &lt;div class="caret" style = "${styles}">&lt;/div>
+                 &lt;/div>
+               `;
+             }
+           }
           
-/**
- * Поиск и стилизация елементов полученных из styles экземпляра DropDown
- * @param {HTMLElement} element созданный экземпляр класса DropDown
- * @param {object} styles объект в котором находяться настройки кастомизации частей селекта
- */
-export function customStyles(element, styles) {
-  if (!styles) {
-    return;
-  }
+           /**
+            * Поиск и стилизация елементов полученных из styles экземпляра DropDown
+            * @param {HTMLElement} element созданный экземпляр класса DropDown
+            * @param {object} styles объект в котором находяться настройки кастомизации частей селекта
+            */
+           export function customStyles(element, styles) {
+             if (!styles) {
+               return;
+             }
           
-  const { head, caret, placeholder } = styles;
+             const { head, caret, placeholder } = styles;
           
-  const cgSelect = element.querySelector('.cg-select');
-  const caretSelect = element.querySelector('.caret');
-  const placeholderSelect = element.querySelector('.selected');
+             const cgSelect = element.querySelector('.cg-select');
+             const caretSelect = element.querySelector('.caret');
+             const placeholderSelect = element.querySelector('.selected');
           
-  customStylesFormat(head, cgSelect);
+             customStylesFormat(head, cgSelect);
           
-  customStylesFormat(caret, caretSelect);
+             customStylesFormat(caret, caretSelect);
           
-  if (placeholderSelect) {
-    customStylesFormat(placeholder, placeholderSelect);
-  }
-}
+             if (placeholderSelect) {
+               customStylesFormat(placeholder, placeholderSelect);
+             }
+           }
           
-// export function customStylesFormat(elemOption, selector) {
-//   if (elemOption) {
-//     Object.entries(elemOption).forEach(([key, value]) => {
-//       selector.style[key] = value;
-//     });
-//   }
-// }
-/**
- * Универсальный метод для стилизации селекта
- * @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
- * @param {HTMLElement} selector  HTMLElement подвергающиеся кастомизации
- */
-exports.customStylesFormat = (elemOption, selector) => {
-  if (elemOption) {
-    Object.entries(elemOption).forEach(([key, value]) => {
-      selector.style[key] = value;
-    });
-  }
-};
+           /**
+            * Универсальный метод для стилизации селекта
+            * @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
+            * @param {HTMLElement} selector  HTMLElement подвергающиеся кастомизации
+            */
+           export function customStylesFormat(elemOption, selector) {
+             if (elemOption) {
+               Object.entries(elemOption).forEach(([key, value]) => {
+                 selector.style[key] = value;
+               });
+             }
+           }
           
-/**
- * Проверка содержит ли item  указанные свойства,
- * @param {object} item проверяемый на определенную структуру элемент
- * @returns {boolean} возвращает true/false если item содержит указанные свойства
- */
-export function checkItemStruct(item) {
-  if (item &amp;&amp; typeof item !== 'object') {
-    return false;
-  }
+           /**
+            * Проверка содержит ли item  указанные свойства,
+            * @param {object} item проверяемый на определенную структуру элемент
+            * @returns {boolean} возвращает true/false если item содержит указанные свойства
+            */
+           export function checkItemStruct(item) {
+             if (item &amp;&amp; typeof item !== 'object') {
+               return false;
+             }
           
-  return item.hasOwnProperty('id') &amp;&amp; item.hasOwnProperty('title') &amp;&amp; item.hasOwnProperty('value');
-}
+             return item.hasOwnProperty('id') &amp;&amp; item.hasOwnProperty('title') &amp;&amp; item.hasOwnProperty('value');
+           }
           
-/**
- * Преобразование каждого елемента полученного из поля Items;
- * @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
- * @param {number} index индекс этого элемента
- * @returns {object} возвращает сформированный объект
- */
-export function getFormatItem(dataItem, index) {
-  const random = Math.random().toString(36).substring(2, 10);
-  let item = {};
+           /**
+            * Преобразование каждого елемента полученного из поля Items;
+            * @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
+            * @param {number} index индекс этого элемента
+            * @returns {object} возвращает сформированный объект
+            */
+           export function getFormatItem(dataItem, index) {
+             const random = Math.random().toString(36).substring(2, 10);
+             let item = {};
           
-  if (checkItemStruct(dataItem)) {
-    item = {
-      id: dataItem.id,
-      title: dataItem.title,
-      value: index,
-    };
-  } else {
-    item = {
-      id: random,
-      title: dataItem,
-      value: index,
-    };
-  }
+             if (checkItemStruct(dataItem)) {
+               item = {
+                 id: dataItem.id,
+                 title: dataItem.title,
+                 value: index,
+               };
+             } else {
+               item = {
+                 id: random,
+                 title: dataItem,
+                 value: index,
+               };
+             }
           
-  return item;
-}
+             return item;
+           }
+           
+           /**
+            * Поведение нативного(одинарного) селекта при выборе кастомного
+            * @param {NodeList} element NodeList нативного селекта
+            * @param {object} item выбранный элемент в кастомном селекте
+            */
+           export function nativOptionOrdinary(element, item) {
+             element.forEach((option) => {
+               option.removeAttribute('selected');
+               if (option.textContent === item) {
+                 option.setAttribute('selected', 'selected');
+               }
+             });
+           }
+           
+           /**
+            * Поведение нативного(Multiple) селекта при выборе в кастомном
+            * @param {NodeList} element NodeList нативного селекта
+            * @param {object} item выбранный элемент в кастомном селекте
+            * @param {boolean} condition специальный флаг при котором добавляются/убераются атрибуты у нативного селекта
+            */
+           export function nativOptionMultiple(element, item, condition) {
+             element.forEach((option) => {
+               if (condition == true) {
+                 if (option.textContent === item) {
+                   option.setAttribute('selected', 'selected');
+                 }
+               } else if (condition == false) {
+                 if (option.textContent === item) {
+                   option.removeAttribute('selected');
+                 }
+               } else {
+                 return;
+               }
+             });
+           }
 </code></pre>
        </article>
      </section>
--- a/src/cg-dropdown.js
+++ b/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...');
--- a/src/components/create-element.js
+++ b/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;
--- a/src/index.html
+++ b/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>
--- a/src/index.js
+++ b/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',
--- a/src/style/main.scss
+++ b/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 {