From 482b3799d2d3011b45b5005782fd2d7648efa0a2 Mon Sep 17 00:00:00 2001
From: MaxOvs <rock_maksimus@mail.ru>
Date: Tue, 25 Oct 2022 21:03:10 +0300
Subject: [PATCH] Finish working search

---
 ...BB%D0%B0%D1%81%D1%81%D0%B0%20DropDown.html |    1 +
 documentation/DropDown.html                   |    1 +
 documentation/cg-dropdown.js.html             | 1262 +++++++++--------
 documentation/create-element.js.html          |  181 ++-
 documentation/global.html                     |   47 +
 documentation/index.html                      |    1 +
 documentation/module-Utils.html               |    1 +
 documentation/module-createElementChips.html  |   81 +-
 documentation/utils.js.html                   |  261 ++--
 src/cg-dropdown.js                            |   19 +-
 src/components/create-element.js              |   10 +-
 src/index.html                                |    2 +-
 src/index.js                                  |   28 +-
 src/style/main.scss                           |   12 +
 14 files changed, 1100 insertions(+), 807 deletions(-)

diff --git 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
index 01b0d30..3f3f9f3 100644
--- 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>
diff --git a/documentation/DropDown.html b/documentation/DropDown.html
index 386878f..b178481 100644
--- 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>
diff --git a/documentation/cg-dropdown.js.html b/documentation/cg-dropdown.js.html
index ef40621..4142af4 100644
--- a/documentation/cg-dropdown.js.html
+++ b/documentation/cg-dropdown.js.html
@@ -20,603 +20,686 @@
       <section>
         <article>
           <pre class="prettyprint source linenums"><code>import {
-  createSelected,
-  customStyles,
-  getFormatItem,
-  customStylesFormat,
-} from './components/utils';
-import { createBreadcrumb } from './components/create-element';
-
-/**
- * @class Описание класса DropDown
- * @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
- *@author Овсяников Максим
- */
-export class DropDown {
-  /**
-   * Созданный HTML елемент
-   * @type {HTMLElement}
-   */
-  #element;
-  /**
-   * Созданный список(ul), с классом list
-   * @type {HTMLElement}
-   */
-  #list;
-  /**
-   * Настройки селекта передаваемые при создании экземпляра класса
-   * @type {object}
-   */
-  #options;
-  /**
-   * Переменная для управления каретки
-   * @type {HTMLElement}
-   */
-  #caret;
-  /**
-   * Массив переданных элементов
-   * @type {object[]}
-   */
-  #items;
-  /**
-   * Переданные категории
-   * @type {string}
-   */
-  #category;
-  /**
-   * Выбранный или массив выбранных элементов из списка
-   * @type {object[] | object}
-   */
-  #selectedItems;
-  /**
-   * Массив индексов выбранных элементов
-   * @type {number[]}
-   */
-  #indexes = [];
-
-  /**
-   * Метод экземпляра класса DropDown
-   * @returns {string[] | string | null} Возвращает выбранные элемент(ы) в виде массива/элемента/null
-   * @description Геттер возвращающий выбранные элемент(ы) селекта
-   */
-  get value() {
-    return this.#selectedItems ?? null;
-  }
-
-  /**
-   * Метод экземпляра класса DropDown
-   * @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив
-   * @description Геттер возвращающий индексы выбранных элемента(ов) селекта
-   */
-  get indexes() {
-    return this.#indexes ?? [];
-  }
-
-  /**
-   *
-   * @param {object} options Объект принимающий настройки селекта
-   * @constructor Конструктор класса DropDown
-   * @description  Конструктор принимает объект и рендерит селект.
-   * @example
-   * options = {
-   *  selector: 'Уникальный селектор',
-      selected: 'Выбранный элемент',
-      placeholder: '...',
-      items: [string|number|object],
-      styles: {
-        head: {
-          background: '...',
-        },
-        list: {...},
-        chips: {...},
-        caret: {...},
-        placeholder: {...},
-      },
-      event: '...',
-      url: 'http/...',
-      multiselect: true/false,
-      multiselectTag: true/false,
-   * }
-     
-   */
-  constructor(options = {}) {
-    this.#init(options);
-    this.#render();
-    this.#initEvent();
-  }
-
-  /**
-   * Метод экземпляра класса DropDown
-   * @param {string | object} item добавляемый елемент
-   * @description добавляет переданный элемент в конец списка и перерисовывает список. Не может использоваться при передачи элементов с категорями
-   * @method addItem
-   */
-  addItem(item) {
-    if (this.#category) {
-      console.log('can`t add item to category');
-      return;
-    }
-
-    if (!item) {
-      return false;
-    }
-
-    const index = this.#items.length;
-
-    this.#items.push(getFormatItem(item, index));
-    this.#render();
-  }
-
-  /**
-   * Метод экземпляра класса DropDown
-   * @param {number} index индекс удаляемого элемента
-   * @description удаляет елемент по индексу из списка и перерисовывает его. Не может использоваться при передачи элементов с категорями.
-   * @method deleteItem
-   */
-  deleteItem(index) {
-    if (this.#category) {
-      console.log('can`t add item to category');
-      return;
-    }
-
-    const item = this.#items[index];
-
-    this.#items.splice(index, 1);
-    this.#render();
-  }
-
-  /**
-   * Метод экземпляра класса DropDown
-   * @description удаляет все елементы из списка и перерисовывает его.
-   * @method deleteItemAll
-   */
-  deleteItemAll() {
-    this.#items.splice(0, this.#items.length);
-    this.#render();
-  }
-
-  /**
-   * Метод экземпляра класса DropDown
-   * @param {number} index индекс выбранного элемента
-   * @description  выбирает элемент который будет изначально отрисовываться в селекте
-   * @method selectIndex
-   */
-  selectIndex(index) {
-    if (this.#category) {
-      console.log('can`t add item to category');
-      return;
-    }
-
-    const options = this.#element.querySelectorAll('.list__item');
-
-    if (index > options.length) {
-      return;
-    }
-
-    const select = options[index].innerText;
-    this.#render(select);
-  }
-
-  /**
-   * Метод экземпляра класса DropDown
-   * @param {number} numberItem номер возвращаемого элемента
-   * @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
-   * @method getElement
-   */
-  getElement(numberItem) {
-    if (numberItem > this.#items.length) {
-      return;
-    }
-    return this.#items[numberItem];
-  }
-
-  /**
-   * Метод экземпляра класса DropDown
-   * @param {boolean} value - Передаваемый параметр для добавления атрибута disabled;
-   * @description Метод позволяющий переключать состояние селекта disabled,
-   * @method disabled
-   */
-  disabled(value) {
-    if (typeof value !== 'boolean') {
-      return;
-    }
-
-    const select = this.#element.querySelector('.cg-select');
-    if (value === true) {
-      this.#element.setAttribute('disabled', true);
-      select.classList.add('disabled');
-    } else {
-      this.#element.removeAttribute('disabled');
-      select.classList.remove('disabled');
-    }
-  }
-
-  /**
-   * Метод экземпляра класса DropDown
-   * @param {HTMLInputElement} button - HTML кнопка
-   * @param {string} method - метод открытия open/close
-   * @description Метод позволяющий открывать/закрывать селект с помощью кнопок
-   * @method buttonControl
-   */
-  buttonControl(button, method) {
-    button.addEventListener('click', () => {
-      if (method === 'open') {
-        this.#open(true);
-      } else if (method === 'close') {
-        this.#close();
-      } else {
-        return;
-      }
-    });
-  }
-
-  /**
-   * Приватный метод инициализации экземпляра класса DropDown
-   * @method #init
-   * @member
-   * @protected
-   * @param {object} options передаваемые настройки селекта
-   * @description Приватный метод. Общая инициализация селекта. Получение настоек и преобразвание элементов селекта.
-   * @example
-   *  {
-        selector: '.cg-dropdown_one',
-        placeholder: 'Выберите авто',
-        items: [
-          'BMW',
-          {
-            id: '213sade',
-            title: 'Opel',
-            value: 1,
-          },
-          'Mersedes',
-          'MAN',
-          'max',
-        ],
-        multiselect: true,
-        multiselectTag: true,
-      }
-   */
-  #init(options) {
-    this.#options = options;
-    const { items, multiselect, url } = this.#options;
-
-    const elem = document.querySelector(options.selector);
-
-    if (!elem) {
-      throw new Error(`Element with selector ${options.selector}`);
-    }
-
-    this.#element = elem;
-
-    this.#element.addEventListener('click', () => {
-      this.#open();
-    });
-
-    this.#items = [];
-
-    if (multiselect) {
-      this.#selectedItems = [];
-    }
-
-    if (!items &amp;&amp; url) {
-      this.#renderUrl();
-      return;
-    }
-
-    items.forEach((dataItem, index) => {
-      if (dataItem.category &amp;&amp; dataItem.categoryItems) {
-        this.#category = dataItem.category;
-
-        this.#items.push(this.#category);
-        dataItem.categoryItems.forEach((categoryItem, indexCategory) => {
-          this.#items.push(getFormatItem(categoryItem, indexCategory));
-        });
-      } else {
-        this.#items.push(getFormatItem(dataItem, index));
-      }
-    });
-  }
-
-  /**
-   * Привaтный метод экземпляра класса DropDown
-   *
-   * @method #initSelected
-   * @param {string} select необязательный елемент. Используется в методе selectIndex
-   * @description Отрисовывает и стилизует селект
-   * @protected
-   */
-  #initSelected(select) {
-    const { styles, selected, placeholder } = this.#options;
-
-    if (selected) {
-      createSelected(this.#element, selected);
-    } else if (placeholder) {
-      createSelected(this.#element, placeholder);
-    } else {
-      createSelected(this.#element, 'Select...');
-    }
-
-    if (styles) {
-      customStyles(this.#element, styles);
-    }
-
-    if (select) {
-      createSelected(this.#element, select, styles);
-    }
-  }
-
-  /**
-   * Приватный метод рендера экземпляра класса DropDown
-   *@protected
-   * @method #render
-   * @param {string} select  необязательный елемент. Передаеться в метод initSelected
-   * @description Рендер елементов в селекте.
-   */
-  #render(select) {
-    const { styles, multiselect } = this.#options;
-
-    if (select || (select &amp;&amp; styles)) {
-      this.#initSelected(select);
-      customStyles(this.#element, styles);
-    } else {
-      this.#initSelected();
-    }
-
-    const ulList = document.createElement('ul');
-
-    ulList.classList.add('list');
-
-    if (styles) {
-      const { list } = styles;
-      customStylesFormat(list, ulList);
-    }
-
-    this.#element.appendChild(ulList);
-
-    this.#items.forEach((dataItem) => {
-      const liItem = document.createElement('li');
-      const strongItem = document.createElement('strong');
-
-      liItem.classList.add('list__item');
-      strongItem.classList.add('category');
-
-      if (multiselect) {
-        const checkBox = document.createElement('input');
-        checkBox.type = 'checkbox';
-        checkBox.setAttribute('id', `chbox-${dataItem.id}`);
-
-        liItem.appendChild(checkBox);
-      }
-
-      let textNode = '';
-
-      if (dataItem.title) {
-        textNode = document.createTextNode(dataItem.title);
-        liItem.appendChild(textNode);
-        ulList.appendChild(liItem);
-      } else {
-        textNode = document.createTextNode(dataItem);
-        strongItem.appendChild(textNode);
-        ulList.appendChild(strongItem);
-      }
-    });
-
-    this.#items.filter((item, index) => {
-      if (typeof item !== 'object') {
-        this.#items.splice(index, 1);
-      }
-      return item;
-    });
-
-    this.#addOptionsBehaviour();
-  }
-
-  /**
-   * Приватный метод рендера экземпляра класса DropDown
-   *@protected
-   * @method #renderUrl
-   * @description Рендер елементов в селекте переданных с URL и их настойка
-   */
-  async #renderUrl() {
-    const { url, items, multiselect } = this.#options;
-
-    if (items) {
-      return;
-    }
-
-    if (!url) {
-      return;
-    }
-
-    const response = await fetch(url);
-    const dataUrl = await response.json();
-
-    dataUrl.forEach((dataItem, index) => {
-      const item = {
-        id: dataItem.id,
-        title: dataItem.name,
-        value: index,
-      };
-      const ulUrl = this.#element.querySelector('.list');
-      const liUrl = document.createElement('li');
-      const textUrl = document.createTextNode(item.title);
-
-      if (multiselect) {
-        const checkBox = document.createElement('input');
-        checkBox.type = 'checkbox';
-
-        checkBox.setAttribute('id', `chbox-${item.id}`);
-        liUrl.appendChild(checkBox);
-      }
-
-      liUrl.classList.add('list__item');
-
-      liUrl.appendChild(textUrl);
-      ulUrl.appendChild(liUrl);
-
-      this.#items.push(item);
-    });
-
-    this.#items.filter((item, index) => {
-      if (typeof item !== 'object') {
-        this.#items.splice(index, 1);
-      }
-      return item;
-    });
-
-    this.#addOptionsBehaviour();
-  }
-
-  /**
-   * Приватный метод экземпляра класса DropDown
-   * @protected
-   * @param {boolean} oneClick необязательный параметр передаваемый из функции buttonControl
-   * @description Открывает список для выбора элемента
-   * @method #open
-   */
-  #open(oneClick) {
-    this.#list = this.#element.querySelector('.list');
-    this.#caret = this.#element.querySelector('.caret');
-
-    if (oneClick === true) {
-      this.#list.classList.add('open');
-      this.#caret.classList.add('caret_rotate');
-    } else {
-      this.#list.classList.toggle('open');
-      this.#caret.classList.toggle('caret_rotate');
-    }
-  }
-
-  /**
-   * Приватный метод экземпляра класса DropDown
-   * @protected
-   * @description Закрывает список
-   * @method #close
-   */
-  #close() {
-    this.#list.classList.remove('open');
-    this.#caret.classList.remove('caret_rotate');
-  }
-
-  /**
-   * Приватный метод экземпляра класса DropDown
-   * @protected
-   * @description Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + Мультиселект Таг.
-   * @method #addOptionsBehaviour
-   */
-  #addOptionsBehaviour() {
-    const { multiselect, placeholder, selected, multiselectTag } = this.#options;
-
-    const options = this.#element.querySelectorAll('.list__item');
-    const select = this.#element.querySelector('.selected');
-
-    const ul = document.createElement('ul');
-
-    if (multiselect) {
-      ul.classList.add('multiselect-tag');
-      select.classList.add('overflow-hidden');
-    }
-
-    options.forEach((option, index) => {
-      option.addEventListener('click', (event) => {
-        const item = this.#items[index];
-        if (multiselect) {
-          event.stopPropagation();
-          option.classList.toggle('active');
-
-          const checkBox = option.querySelector('input[type="checkbox"]');
-
-          if (checkBox) {
-            if (!(event.target instanceof HTMLInputElement)) {
-              checkBox.checked = !checkBox.checked;
+            createSelected,
+            customStyles,
+            getFormatItem,
+            customStylesFormat,
+            nativOptionMultiple,
+            nativOptionOrdinary,
+          } from './components/utils';
+          import {
+            createBreadcrumb,
+            createInputSearch,
+            createNativSelectOption,
+            createNativeSelect,
+          } from './components/create-element';
+          
+          /**
+           * @class Описание класса DropDown
+           * @description Этот класс реализовывает функционал кастомного селекта, с возможностями кастомизации.
+           *@author Овсяников Максим
+           */
+          export class DropDown {
+            /**
+             * Созданный HTML елемент
+             * @type {HTMLElement}
+             */
+            #element;
+            /**
+             * Созданный список(ul), с классом list
+             * @type {HTMLElement}
+             */
+            #list;
+            /**
+             * Настройки селекта передаваемые при создании экземпляра класса
+             * @type {object}
+             */
+            #options;
+            /**
+             * Переменная для управления каретки
+             * @type {HTMLElement}
+             */
+            #caret;
+            /**
+             * Массив переданных элементов
+             * @type {object[]}
+             */
+            #items;
+            /**
+             * Переданные категории
+             * @type {string}
+             */
+            #category;
+            /**
+             * Выбранный или массив выбранных элементов из списка
+             * @type {object[] | object}
+             */
+            #selectedItems;
+            /**
+             * Массив индексов выбранных элементов
+             * @type {number[]}
+             */
+            #indexes = [];
+          
+            /**
+             * Метод экземпляра класса DropDown
+             * @returns {string[] | string | null} Возвращает выбранные элемент(ы) в виде массива/элемента/null
+             * @description Геттер возвращающий выбранные элемент(ы) селекта
+             */
+            get value() {
+              return this.#selectedItems ?? null;
             }
-
-            const checkIndex = this.#indexes.indexOf(index);
-
-            if (checkIndex === -1) {
-              this.#indexes.push(index);
-
-              select.innerText = '';
-
-              if (multiselectTag) {
-                this.#selectedItems.push(item);
-                select.appendChild(ul);
-
-                const data = {
-                  option: this.#options,
-                  element: this.#element,
-                  indexes: this.#indexes,
-                  selectedItems: this.#selectedItems,
+          
+            /**
+             * Метод экземпляра класса DropDown
+             * @returns {number | number[]}Возвращает индексы выбранных элемента(ов) в виде массива/пустой массив
+             * @description Геттер возвращающий индексы выбранных элемента(ов) селекта
+             */
+            get indexes() {
+              return this.#indexes ?? [];
+            }
+          
+            /**
+             *
+             * @param {object} options Объект принимающий настройки селекта
+             * @constructor Конструктор класса DropDown
+             * @description  Конструктор принимает объект и рендерит селект.
+             * @example
+             * options = {
+             *  selector: 'Уникальный селектор',
+                selected: 'Выбранный элемент',
+                placeholder: '...',
+                items: [string|number|object],
+                styles: {
+                  head: {
+                    background: '...',
+                  },
+                  list: {...},
+                  chips: {...},
+                  caret: {...},
+                  placeholder: {...},
+                },
+                event: '...',
+                url: 'http/...',
+                multiselect: true/false,
+                multiselectTag: true/false,
+             * }
+               
+             */
+            constructor(options = {}) {
+              this.#init(options);
+              this.#render();
+              this.#initEvent();
+            }
+          
+            /**
+             * Метод экземпляра класса DropDown
+             * @param {string | object} item добавляемый елемент
+             * @description добавляет переданный элемент в конец списка и перерисовывает список. Не может использоваться при передачи элементов с категорями
+             * @method addItem
+             */
+            addItem(item) {
+              if (this.#category) {
+                console.log('can`t add item to category');
+                return;
+              }
+          
+              if (!item) {
+                return false;
+              }
+          
+              const index = this.#items.length;
+          
+              this.#items.push(getFormatItem(item, index));
+              this.#render();
+            }
+          
+            /**
+             * Метод экземпляра класса DropDown
+             * @param {number} index индекс удаляемого элемента
+             * @description удаляет елемент по индексу из списка и перерисовывает его. Не может использоваться при передачи элементов с категорями.
+             * @method deleteItem
+             */
+            deleteItem(index) {
+              if (this.#category) {
+                console.log('can`t add item to category');
+                return;
+              }
+          
+              const item = this.#items[index];
+          
+              this.#items.splice(index, 1);
+              this.#render();
+            }
+          
+            /**
+             * Метод экземпляра класса DropDown
+             * @description удаляет все елементы из списка и перерисовывает его.
+             * @method deleteItemAll
+             */
+            deleteItemAll() {
+              this.#items.splice(0, this.#items.length);
+              this.#render();
+            }
+          
+            /**
+             * Метод экземпляра класса DropDown
+             * @param {number} index индекс выбранного элемента
+             * @description  выбирает элемент который будет изначально отрисовываться в селекте
+             * @method selectIndex
+             */
+            selectIndex(index) {
+              if (this.#category) {
+                console.log('can`t add item to category');
+                return;
+              }
+          
+              const options = this.#element.querySelectorAll('.list__item');
+          
+              if (index > options.length) {
+                return;
+              }
+          
+              const select = options[index].innerText;
+              this.#render(select);
+            }
+          
+            /**
+             * Метод экземпляра класса DropDown
+             * @param {number} numberItem номер возвращаемого элемента
+             * @returns {HTMLElement} возвращает ссылку на выбранный HTML элемент
+             * @method getElement
+             */
+            getElement(numberItem) {
+              if (numberItem > this.#items.length) {
+                return;
+              }
+              return this.#items[numberItem];
+            }
+          
+            /**
+             * Метод экземпляра класса DropDown
+             * @param {boolean} value - Передаваемый параметр для добавления атрибута disabled;
+             * @description Метод позволяющий переключать состояние селекта disabled,
+             * @method disabled
+             */
+            disabled(value) {
+              if (typeof value !== 'boolean') {
+                return;
+              }
+          
+              const select = this.#element.querySelector('.cg-select');
+              if (value === true) {
+                this.#element.setAttribute('disabled', true);
+                select.classList.add('disabled');
+              } else {
+                this.#element.removeAttribute('disabled');
+                select.classList.remove('disabled');
+              }
+            }
+          
+            /**
+             * Метод экземпляра класса DropDown
+             * @param {HTMLInputElement} button - HTML кнопка
+             * @param {string} method - метод открытия open/close
+             * @description Метод позволяющий открывать/закрывать селект с помощью кнопок
+             * @method buttonControl
+             */
+            buttonControl(button, method) {
+              button.addEventListener('click', () => {
+                if (method === 'open') {
+                  this.#open(true);
+                } else if (method === 'close') {
+                  this.#close();
+                } else {
+                  return;
+                }
+              });
+            }
+          
+            /**
+             * Приватный метод инициализации экземпляра класса DropDown
+             * @method #init
+             * @member
+             * @protected
+             * @param {object} options передаваемые настройки селекта
+             * @description Приватный метод. Общая инициализация селекта. Получение настоек и преобразвание элементов селекта.
+             * @example
+             *  {
+                  selector: '.cg-dropdown_one',
+                  placeholder: 'Выберите авто',
+                  items: [
+                    'BMW',
+                    {
+                      id: '213sade',
+                      title: 'Opel',
+                      value: 1,
+                    },
+                    'Mersedes',
+                    'MAN',
+                    'max',
+                  ],
+                  multiselect: true,
+                  multiselectTag: true,
+                }
+             */
+            #init(options) {
+              this.#options = options;
+              const { items, multiselect, url } = this.#options;
+          
+              const elem = document.querySelector(options.selector);
+          
+              if (!elem) {
+                throw new Error(`Element with selector ${options.selector}`);
+              }
+          
+              this.#element = elem;
+          
+              this.#element.addEventListener('click', () => {
+                this.#open();
+              });
+          
+              this.#items = [];
+          
+              if (multiselect) {
+                this.#selectedItems = [];
+              }
+          
+              if (!items &amp;&amp; url) {
+                this.#renderUrl();
+                return;
+              }
+          
+              items.forEach((dataItem, index) => {
+                if (dataItem.category &amp;&amp; dataItem.categoryItems) {
+                  this.#category = dataItem.category;
+          
+                  this.#items.push(this.#category);
+                  dataItem.categoryItems.forEach((categoryItem, indexCategory) => {
+                    this.#items.push(getFormatItem(categoryItem, indexCategory));
+                  });
+                } else {
+                  this.#items.push(getFormatItem(dataItem, index));
+                }
+              });
+            }
+          
+            /**
+             * Привaтный метод экземпляра класса DropDown
+             *
+             * @method #initSelected
+             * @param {string} select необязательный елемент. Используется в методе selectIndex
+             * @description Отрисовывает и стилизует селект
+             * @protected
+             */
+            #initSelected(select) {
+              const { styles, selected, placeholder } = this.#options;
+          
+              if (selected) {
+                createSelected(this.#element, selected);
+              } else if (placeholder) {
+                createSelected(this.#element, placeholder);
+              } else {
+                createSelected(this.#element, 'Select...');
+              }
+          
+              if (styles) {
+                customStyles(this.#element, styles);
+              }
+          
+              if (select) {
+                createSelected(this.#element, select, styles);
+              }
+            }
+          
+            /**
+             * Приватный метод рендера экземпляра класса DropDown
+             *@protected
+             * @method #render
+             * @param {string} select  необязательный елемент. Передаеться в метод initSelected
+             * @description Рендер елементов в селекте.
+             */
+            #render(select) {
+              const { styles, multiselect, searchMode } = this.#options;
+              const random = Math.random().toString(36).substring(2, 10);
+          
+              if (select || (select &amp;&amp; styles)) {
+                this.#initSelected(select);
+                customStyles(this.#element, styles);
+              } else {
+                this.#initSelected();
+              }
+          
+              const ulList = document.createElement('ul');
+              const intputSearch = createInputSearch(random);
+              this.random = random;
+          
+              const nativSelect = createNativeSelect();
+          
+              ulList.classList.add('list');
+              if (searchMode) {
+                ulList.appendChild(intputSearch);
+              }
+          
+              if (styles) {
+                const { list } = styles;
+                customStylesFormat(list, ulList);
+              }
+          
+              this.#element.appendChild(ulList);
+          
+              this.#items.forEach((dataItem) => {
+                this.#element.appendChild(nativSelect);
+          
+                const liItem = document.createElement('li');
+                const nativOption = createNativSelectOption();
+                const strongItem = document.createElement('strong');
+          
+                liItem.classList.add('list__item');
+                strongItem.classList.add('category');
+          
+                if (multiselect) {
+                  const checkBox = document.createElement('input');
+                  checkBox.type = 'checkbox';
+                  checkBox.setAttribute('id', `chbox-${dataItem.id}`);
+          
+                  liItem.appendChild(checkBox);
+                  nativSelect.setAttribute('multiple', 'multiple');
+                }
+          
+                let textNode = '';
+          
+                if (dataItem.title) {
+                  nativOption.text = dataItem.title;
+                  nativOption.value = dataItem.title;
+                  textNode = document.createTextNode(dataItem.title);
+          
+                  nativSelect.appendChild(nativOption);
+                  liItem.appendChild(textNode);
+                  ulList.appendChild(liItem);
+                } else {
+                  textNode = document.createTextNode(dataItem);
+                  strongItem.appendChild(textNode);
+                  ulList.appendChild(strongItem);
+                }
+              });
+          
+              this.#items.filter((item, index) => {
+                if (typeof item !== 'object') {
+                  this.#items.splice(index, 1);
+                }
+                return item;
+              });
+          
+              this.#addOptionsBehaviour();
+            }
+          
+            /**
+             * Приватный метод рендера экземпляра класса DropDown
+             *@protected
+             * @method #renderUrl
+             * @description Рендер елементов в селекте переданных с URL и их настойка
+             */
+            async #renderUrl() {
+              const { url, items, multiselect } = this.#options;
+          
+              if (items) {
+                return;
+              }
+          
+              if (!url) {
+                return;
+              }
+          
+              const response = await fetch(url);
+              const dataUrl = await response.json();
+          
+              const nativSelect = createNativeSelect();
+          
+              dataUrl.forEach((dataItem, index) => {
+                const item = {
+                  id: dataItem.id,
+                  title: dataItem.name,
+                  value: index,
                 };
-
-                ul.appendChild(createBreadcrumb(data, item.title, index, item.id));
-              } else {
-                this.#selectedItems.push(item.title);
-                select.innerText = this.#selectedItems;
-              }
-            } else {
-              if (multiselectTag) {
-                const tagItem = document.getElementById(`tag-${index}-${item.id}`);
-
-                ul.removeChild(tagItem);
-              }
-              this.#indexes.splice(checkIndex, 1);
-              this.#selectedItems.splice(checkIndex, 1);
+                const ulUrl = this.#element.querySelector('.list');
+          
+                const nativOption = createNativSelectOption();
+                const liUrl = document.createElement('li');
+                const textUrl = document.createTextNode(item.title);
+          
+                if (multiselect) {
+                  const checkBox = document.createElement('input');
+                  checkBox.type = 'checkbox';
+          
+                  checkBox.setAttribute('id', `chbox-${item.id}`);
+                  nativSelect.setAttribute('multiple', 'multiple');
+          
+                  liUrl.appendChild(checkBox);
+                }
+          
+                liUrl.classList.add('list__item');
+                nativOption.value = item.title;
+                nativOption.text = item.title;
+          
+                nativSelect.appendChild(nativOption);
+                liUrl.appendChild(textUrl);
+                ulUrl.appendChild(liUrl);
+          
+                this.#items.push(item);
+              });
+          
+              this.#element.appendChild(nativSelect);
+          
+              this.#items.filter((item, index) => {
+                if (typeof item !== 'object') {
+                  this.#items.splice(index, 1);
+                }
+                return item;
+              });
+          
+              this.#addOptionsBehaviour();
             }
-
-            if (!this.#selectedItems.length) {
-              if (placeholder) {
-                select.innerText = placeholder;
-              } else if (selected) {
-                select.innerText = selected;
+          
+            /**
+             * Приватный метод экземпляра класса DropDown
+             * @protected
+             * @param {boolean} oneClick необязательный параметр передаваемый из функции buttonControl
+             * @description Открывает список для выбора элемента
+             * @method #open
+             */
+            #open(oneClick) {
+              this.#list = this.#element.querySelector('.list');
+              this.#caret = this.#element.querySelector('.caret');
+          
+              if (oneClick === true) {
+                this.#list.classList.add('open');
+                this.#caret.classList.add('caret_rotate');
               } else {
-                select.innerText = 'Select...';
+                this.#list.classList.toggle('open');
+                this.#caret.classList.toggle('caret_rotate');
               }
-            } else {
-              if (multiselectTag) {
-                select.appendChild(ul);
-              } else {
-                select.innerText = this.#selectedItems;
+            }
+          
+            /**
+             * Приватный метод экземпляра класса DropDown
+             * @protected
+             * @description Закрывает список
+             * @method #close
+             */
+            #close() {
+              this.#list.classList.remove('open');
+              this.#caret.classList.remove('caret_rotate');
+            }
+          
+            /**
+             * Приватный метод экземпляра класса DropDown
+             * @protected
+             * @description Метод реализовывающий выбор элементов в разных режимах. Обычный/Мультиселект/Мультиселект + Мультиселект Таг.
+             * @method #addOptionsBehaviour
+             */
+            #addOptionsBehaviour() {
+              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 ulMultipul = document.createElement('ul');
+          
+              if (multiselect) {
+                ulMultipul.classList.add('multiselect-tag');
+                select.classList.add('overflow-hidden');
+              }
+          
+              if (searchMode &amp;&amp; searchMode === true) {
+                this.#searchMode(this.random);
+              }
+          
+              options.forEach((option, index) => {
+                option.addEventListener('click', (event) => {
+                  const item = this.#items[index];
+          
+                  if (multiselect) {
+                    event.stopPropagation();
+                    option.classList.toggle('active');
+          
+                    const checkBox = option.querySelector('input[type="checkbox"]');
+          
+                    if (checkBox) {
+                      if (!(event.target instanceof HTMLInputElement)) {
+                        checkBox.checked = !checkBox.checked;
+                      }
+          
+                      const checkIndex = this.#indexes.indexOf(index);
+          
+                      if (checkIndex === -1) {
+                        nativOptionMultiple(nativOption, item.title, true);
+          
+                        this.#indexes.push(index);
+          
+                        select.innerText = '';
+          
+                        if (multiselectTag) {
+                          this.#selectedItems.push(item);
+                          select.appendChild(ulMultipul);
+          
+                          const data = {
+                            option: this.#options,
+                            element: this.#element,
+                            indexes: this.#indexes,
+                            selectedItems: this.#selectedItems,
+                          };
+          
+                          ulMultipul.appendChild(createBreadcrumb(data, item.title, index, item.id));
+                        } else {
+                          this.#selectedItems.push(item.title);
+                          select.innerText = this.#selectedItems;
+                        }
+                      } else {
+                        if (multiselectTag) {
+                          const tagItem = document.getElementById(`tag-${index}-${item.id}`);
+                          ulMultipul.removeChild(tagItem);
+                        }
+                        this.#indexes.splice(checkIndex, 1);
+                        this.#selectedItems.splice(checkIndex, 1);
+                        nativOptionMultiple(nativOption, item.title, false);
+                      }
+          
+                      if (!this.#selectedItems.length) {
+                        if (placeholder) {
+                          select.innerText = placeholder;
+                        } else if (selected) {
+                          select.innerText = selected;
+                        } else {
+                          select.innerText = 'Select...';
+                        }
+                      } else {
+                        if (multiselectTag) {
+                          select.appendChild(ulMultipul);
+                        } else {
+                          select.innerText = this.#selectedItems;
+                        }
+                      }
+                    }
+                  } else {
+                    select.innerText = item.title;
+                    this.#selectedItems = item;
+                    nativOptionOrdinary(nativOption, item.title);
+          
+                    options.forEach((option) => {
+                      option.classList.remove('active');
+                    });
+                    option.classList.add('active');
+                  }
+                });
+              });
+            }
+          
+            /**
+             * Метод который реализует поиск элементов в селекте
+             * @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...');
+          
+              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();
+          
+                if (val != '') {
+                  searchSelect.forEach((elem) => {
+                    if (elem.innerText.search(val) == -1) {
+                      elem.classList.add('displayHide');
+                      result.classList.remove('displayHide');
+                    } else {
+                      elem.classList.remove('displayHide');
+                    }
+                  });
+                } else {
+                  searchSelect.forEach((elem) => {
+                    elem.classList.remove('displayHide');
+                    result.classList.add('displayHide');
+                  });
+                }
+              };
+            }
+          
+            /**
+             * Приватный метод экземпляра класса DropDown
+             * @protected
+             * @description Открывает и закрывает список по переданному эвенту
+             * @method #initEvent
+             */
+            #initEvent() {
+              const { event } = this.#options;
+              if (!event) {
+                return;
+              }
+          
+              if (event) {
+                if (event === 'mouseenter') {
+                  this.#element.addEventListener(event, () => {
+                    this.#open();
+                  });
+                  this.#element.addEventListener('mouseleave', () => {
+                    this.#close();
+                  });
+                }
               }
             }
           }
-        } else {
-          select.innerText = item.title;
-          this.#selectedItems = item;
-
-          options.forEach((option) => {
-            option.classList.remove('active');
-          });
-          option.classList.add('active');
-        }
-      });
-    });
-  }
-
-  /**
-   * Приватный метод экземпляра класса DropDown
-   * @protected
-   * @description Открывает и закрывает список по переданному эвенту
-   * @method #initEvent
-   */
-  #initEvent() {
-    const { event } = this.#options;
-    if (!event) {
-      return;
-    }
-
-    if (event) {
-      if (event === 'mouseenter') {
-        this.#element.addEventListener(event, () => {
-          this.#open();
-        });
-        this.#element.addEventListener('mouseleave', () => {
-          this.#close();
-        });
-      }
-    }
-  }
-}
 </code></pre>
         </article>
       </section>
@@ -649,6 +732,7 @@ export class DropDown {
         <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>
diff --git a/documentation/create-element.js.html b/documentation/create-element.js.html
index 559c135..0bd657a 100644
--- 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
- */
-
-/**
- * Метод который создает и отвечает за поведение 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');
-
-  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.classList.add('svg-icon');
-
-  svgIcon.appendChild(path1);
-  svgIcon.appendChild(path2);
-  liChip.appendChild(textNode);
-  liChip.appendChild(svgIcon);
-
-  if (styles) {
-    const { chips } = styles;
-    customStylesFormat(chips, liChip);
-  }
-
-  svgIcon.addEventListener('click', (event) => {
-    event.stopPropagation();
-
-    const deleteIcon = indexes.indexOf(index);
-
-    indexes.splice(deleteIcon, 1);
-    selectedItems.splice(deleteIcon, 1);
-
-    let checkBox = '';
-
-    if (id) {
-      checkBox = document.getElementById(`chbox-${id}`);
-    } else {
-      checkBox = document.getElementById(`chbox-${index}`);
-    }
-
-    checkBox.checked = false;
-    checkBox.parentElement.classList.remove('active');
-
-    if (!selectedItems.length) {
-      selected.innerText = placeholder;
-    }
-
-    liChip.parentElement.removeChild(liChip);
-  });
-
-  return liChip;
-}
+          ><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;
+            
+              const selected = element.querySelector('.selected');
+              const nativOption = element.querySelectorAll('.nativSelect__nativOption');
+            
+              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.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.classList.add('svg-icon');
+            
+              svgIcon.appendChild(path1);
+              svgIcon.appendChild(path2);
+              liChip.appendChild(textNode);
+              liChip.appendChild(svgIcon);
+            
+              if (styles) {
+                const { chips } = styles;
+                customStylesFormat(chips, liChip);
+              }
+            
+              svgIcon.addEventListener('click', (event) => {
+                event.stopPropagation();
+                nativOptionMultiple(nativOption, title, false);
+            
+                const deleteIcon = indexes.indexOf(index);
+                let checkBox = '';
+            
+                indexes.splice(deleteIcon, 1);
+                selectedItems.splice(deleteIcon, 1);
+            
+                if (id) {
+                  checkBox = document.getElementById(`chbox-${id}`);
+                } else {
+                  checkBox = document.getElementById(`chbox-${index}`);
+                }
+            
+                checkBox.checked = false;
+                checkBox.parentElement.classList.remove('active');
+            
+                if (!selectedItems.length) {
+                  selected.innerText = placeholder;
+                }
+            
+                liChip.parentElement.removeChild(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>
diff --git a/documentation/global.html b/documentation/global.html
index bf19d72..8e3aa6c 100644
--- 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>
diff --git a/documentation/index.html b/documentation/index.html
index a7bf70d..75d521c 100644
--- 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>
diff --git a/documentation/module-Utils.html b/documentation/module-Utils.html
index 139982d..927d30f 100644
--- 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>
diff --git a/documentation/module-createElementChips.html b/documentation/module-createElementChips.html
index 55412e7..69f4f9f 100644
--- 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>
diff --git a/documentation/utils.js.html b/documentation/utils.js.html
index b447813..299e8d0 100644
--- 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;
- */
-
-/**
- * Создание кнопки выбора элементов
- * @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);
-
-    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;
-  }
-
-  const { head, caret, placeholder } = styles;
-
-  const cgSelect = element.querySelector('.cg-select');
-  const caretSelect = element.querySelector('.caret');
-  const placeholderSelect = element.querySelector('.selected');
-
-  customStylesFormat(head, cgSelect);
-
-  customStylesFormat(caret, caretSelect);
-
-  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;
-    });
-  }
-};
-
-/**
- * Проверка содержит ли 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');
-}
-
-/**
- * Преобразование каждого елемента полученного из поля 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,
-    };
-  }
-
-  return item;
-}
+            * 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>
+                 `;
+             }
+           
+             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>
+               `;
+             }
+           }
+           
+           /**
+            * Поиск и стилизация елементов полученных из styles экземпляра DropDown
+            * @param {HTMLElement} element созданный экземпляр класса DropDown
+            * @param {object} styles объект в котором находяться настройки кастомизации частей селекта
+            */
+           export function customStyles(element, styles) {
+             if (!styles) {
+               return;
+             }
+           
+             const { head, caret, placeholder } = styles;
+           
+             const cgSelect = element.querySelector('.cg-select');
+             const caretSelect = element.querySelector('.caret');
+             const placeholderSelect = element.querySelector('.selected');
+           
+             customStylesFormat(head, cgSelect);
+           
+             customStylesFormat(caret, caretSelect);
+           
+             if (placeholderSelect) {
+               customStylesFormat(placeholder, placeholderSelect);
+             }
+           }
+           
+           /**
+            * Универсальный метод для стилизации селекта
+            * @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;
+             }
+           
+             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 = {};
+           
+             if (checkItemStruct(dataItem)) {
+               item = {
+                 id: dataItem.id,
+                 title: dataItem.title,
+                 value: index,
+               };
+             } else {
+               item = {
+                 id: random,
+                 title: dataItem,
+                 value: index,
+               };
+             }
+           
+             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>
diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index 0d232fb..35e791b 100644
--- 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...');
diff --git a/src/components/create-element.js b/src/components/create-element.js
index 8221b9f..3a78064 100644
--- 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;
diff --git a/src/index.html b/src/index.html
index 80c9334..d1f9e64 100644
--- 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>
diff --git a/src/index.js b/src/index.js
index 9827b54..47e5c1d 100644
--- 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',
diff --git a/src/style/main.scss b/src/style/main.scss
index a875e6a..e7cbf23 100644
--- 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 {