From 372d5d417512da4d9fa1d6f97011bcd388ca45b1 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Mon, 24 Oct 2022 20:13:08 +0300 Subject: [PATCH 1/3] Added search but very bad working --- src/cg-dropdown.js | 33 +++++++++++++++++++++++++++++++-- src/components/utils.js | 17 +++++++++++++++++ src/index.html | 4 ++-- src/index.js | 31 ++++++++++++++++--------------- src/style/main.scss | 25 ++++++++++++++++++++++++- 5 files changed, 90 insertions(+), 20 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index fe38e67..b8d0a6b 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -5,6 +5,7 @@ import { customStylesFormat, nativOptionMultiple, nativOptionOrdinary, + createSelectedSearch, } from './components/utils'; import { createBreadcrumb, @@ -311,8 +312,9 @@ export class DropDown { * @protected */ #initSelected(select) { - const { styles, selected, placeholder } = this.#options; + const { styles, selected, placeholder, searchMode } = this.#options; + console.log(searchMode); if (selected) { createSelected(this.#element, selected); } else if (placeholder) { @@ -321,6 +323,9 @@ export class DropDown { createSelected(this.#element, 'Select...'); } + if (searchMode) { + createSelectedSearch(this.#element); + } if (styles) { customStyles(this.#element, styles); } @@ -515,7 +520,7 @@ export class DropDown { const options = this.#element.querySelectorAll('.list__item'); const select = this.#element.querySelector('.selected'); const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption'); - + const search = this.#element.querySelector('#searchSelect'); const ulMultipul = document.createElement('ul'); if (multiselect) { @@ -523,6 +528,9 @@ export class DropDown { select.classList.add('overflow-hidden'); } + // console.log(search); + this.searchMode(); + options.forEach((option, index) => { option.addEventListener('click', (event) => { const item = this.#items[index]; @@ -603,6 +611,27 @@ export class DropDown { }); } + searchMode() { + document.querySelector('#searchSelect').oninput = function () { + let val = this.value.trim(); + let searchSelect = document.querySelectorAll('.list__item'); + console.log(searchSelect); + + if (val != '') { + searchSelect.forEach((elem) => { + if (elem.innerText.search(val) == -1) { + elem.classList.add('displayHide'); + } else { + elem.classList.remove('displayHide'); + } + }); + } else { + searchSelect.forEach((elem) => { + elem.classList.remove('displayHide'); + }); + } + }; + } /** * Приватный метод экземпляра класса DropDown * @protected diff --git a/src/components/utils.js b/src/components/utils.js index 7a3058e..889b2c9 100644 --- a/src/components/utils.js +++ b/src/components/utils.js @@ -31,6 +31,23 @@ export function createSelected(element, content, styles) { } } +export function createSelectedSearch(element) { + if (element) { + element.innerHTML = ` +
+
+

+ + +
+
+
+ `; + } else { + return; + } +} + /** * Поиск и стилизация елементов полученных из styles экземпляра DropDown * @param {HTMLElement} element созданный экземпляр класса DropDown diff --git a/src/index.html b/src/index.html index b312a03..3fe5cbd 100644 --- a/src/index.html +++ b/src/index.html @@ -10,10 +10,10 @@
-
+ - + diff --git a/src/index.js b/src/index.js index e298383..7a67d33 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,8 @@ import { DropDown } from './cg-dropdown'; // ------------------------------Обычный селект-------------------- const dropdown = new DropDown({ selector: '.cg-dropdown_one', - placeholder: 'Выберите авто', + // placeholder: 'Выберите авто', + searchMode: true, items: [ 'BMW', { @@ -19,21 +20,21 @@ const dropdown = new DropDown({ multiselectTag: true, }); -dropdown.disabled(false); +// 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', +// styles: { +// head: { +// background: 'black', +// width: '350px', +// }, +// }, +// multiselect: true, +// multiselectTag: true, +// }); // --------------------------------Категории-------------------------- // const dropdown4 = new DropDown({ diff --git a/src/style/main.scss b/src/style/main.scss index da7e7ae..88696f1 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -29,7 +29,7 @@ body { .cg-select { padding: 5px; - + flex-grow: 1; min-height: 50px; color: #fff; display: flex; @@ -210,3 +210,26 @@ input[type='checkbox'] { ::-webkit-scrollbar-thumb { background-color: #4d4d4d; } + +.displayHide { + display: none; +} + +.searchSelect { + // border: solid black 1px; + // border-radius: 5px; + display: flex; + align-items: center; + // width: 150px; + // height: 45px; + + textarea { + width: 0.75em; + resize: none; + height: 18px; + background: transparent; + border: none; + outline: 0; + box-shadow: none; + } +} From 19a857280d9aad42f7b78c95e3c58f34950b55dc Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Tue, 25 Oct 2022 16:07:12 +0300 Subject: [PATCH 2/3] Search in the working! --- src/cg-dropdown.js | 46 +++++++++++------ src/components/create-element.js | 10 ++++ src/components/utils.js | 17 ------- src/index.html | 4 +- src/index.js | 86 ++++++++++++++++---------------- src/style/main.scss | 19 ------- 6 files changed, 87 insertions(+), 95 deletions(-) diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index b8d0a6b..0d232fb 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -5,10 +5,10 @@ import { customStylesFormat, nativOptionMultiple, nativOptionOrdinary, - createSelectedSearch, } from './components/utils'; import { createBreadcrumb, + createInputSearch, createNativSelectOption, createNativeSelect, } from './components/create-element'; @@ -312,9 +312,8 @@ export class DropDown { * @protected */ #initSelected(select) { - const { styles, selected, placeholder, searchMode } = this.#options; + const { styles, selected, placeholder } = this.#options; - console.log(searchMode); if (selected) { createSelected(this.#element, selected); } else if (placeholder) { @@ -323,9 +322,6 @@ export class DropDown { createSelected(this.#element, 'Select...'); } - if (searchMode) { - createSelectedSearch(this.#element); - } if (styles) { customStyles(this.#element, styles); } @@ -343,7 +339,7 @@ export class DropDown { * @description Рендер елементов в селекте. */ #render(select) { - const { styles, multiselect } = this.#options; + const { styles, multiselect, searchMode } = this.#options; if (select || (select && styles)) { this.#initSelected(select); @@ -353,9 +349,17 @@ export class DropDown { } const ulList = document.createElement('ul'); + const intputSearch = createInputSearch(); + // intputSearch.type = 'text'; + // intputSearch.setAttribute('id', 'searchSelect'); + // intputSearch.setAttribute('placeholder', 'Search...'); + const nativSelect = createNativeSelect(); ulList.classList.add('list'); + if (searchMode) { + ulList.appendChild(intputSearch); + } if (styles) { const { list } = styles; @@ -515,12 +519,11 @@ export class DropDown { * @method #addOptionsBehaviour */ #addOptionsBehaviour() { - const { multiselect, placeholder, selected, multiselectTag } = this.#options; + const { multiselect, placeholder, selected, multiselectTag, searchMode } = this.#options; const options = this.#element.querySelectorAll('.list__item'); const select = this.#element.querySelector('.selected'); const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption'); - const search = this.#element.querySelector('#searchSelect'); const ulMultipul = document.createElement('ul'); if (multiselect) { @@ -528,8 +531,9 @@ export class DropDown { select.classList.add('overflow-hidden'); } - // console.log(search); - this.searchMode(); + if (searchMode && searchMode === true) { + this.searchMode(); + } options.forEach((option, index) => { option.addEventListener('click', (event) => { @@ -612,15 +616,27 @@ export class DropDown { } searchMode() { - document.querySelector('#searchSelect').oninput = function () { + const input = document.querySelector('#searchSelect'); + const searchSelect = this.#element.querySelectorAll('.list__item'); + const result = document.createElement('p'); + const textNode = document.createTextNode('No matches...'); + + result.appendChild(textNode); + result.classList.add('displayHide'); + input.parentElement.appendChild(result); + + input.addEventListener('click', (e) => { + e.stopPropagation(); + }); + + input.oninput = function () { let val = this.value.trim(); - let searchSelect = document.querySelectorAll('.list__item'); - console.log(searchSelect); if (val != '') { searchSelect.forEach((elem) => { if (elem.innerText.search(val) == -1) { elem.classList.add('displayHide'); + result.classList.remove('displayHide'); } else { elem.classList.remove('displayHide'); } @@ -628,10 +644,12 @@ export class DropDown { } else { searchSelect.forEach((elem) => { elem.classList.remove('displayHide'); + result.classList.add('displayHide'); }); } }; } + /** * Приватный метод экземпляра класса DropDown * @protected diff --git a/src/components/create-element.js b/src/components/create-element.js index 3fb49ca..8221b9f 100644 --- a/src/components/create-element.js +++ b/src/components/create-element.js @@ -93,3 +93,13 @@ export function createNativSelectOption() { nativOption.classList.add('nativSelect__nativOption'); return nativOption; } + +export function createInputSearch() { + const intputSearch = document.createElement('input'); + + intputSearch.type = 'text'; + intputSearch.setAttribute('id', 'searchSelect'); + intputSearch.setAttribute('placeholder', 'Search...'); + + return intputSearch; +} diff --git a/src/components/utils.js b/src/components/utils.js index 889b2c9..7a3058e 100644 --- a/src/components/utils.js +++ b/src/components/utils.js @@ -31,23 +31,6 @@ export function createSelected(element, content, styles) { } } -export function createSelectedSearch(element) { - if (element) { - element.innerHTML = ` -
-
-

- - -
-
-
- `; - } else { - return; - } -} - /** * Поиск и стилизация елементов полученных из styles экземпляра DropDown * @param {HTMLElement} element созданный экземпляр класса DropDown diff --git a/src/index.html b/src/index.html index 3fe5cbd..80c9334 100644 --- a/src/index.html +++ b/src/index.html @@ -14,9 +14,9 @@ - + - +
diff --git a/src/index.js b/src/index.js index 7a67d33..9827b54 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import { DropDown } from './cg-dropdown'; // ------------------------------Обычный селект-------------------- const dropdown = new DropDown({ selector: '.cg-dropdown_one', - // placeholder: 'Выберите авто', + placeholder: 'Выберите авто', searchMode: true, items: [ 'BMW', @@ -37,48 +37,48 @@ const dropdown = new DropDown({ // }); // --------------------------------Категории-------------------------- -// const dropdown4 = new DropDown({ -// selector: '.cg-dropdown_button', -// placeholder: 'Выберите регион', -// items: [ -// { -// category: 'Russia', -// categoryItems: [ -// { -// id: '28qwds', -// title: 'Москва', -// value: 0, -// }, -// , -// 'Ростов-на-дону', -// 'Саратов', -// 'Волгоград', -// 'Донецк', -// ], -// }, -// { -// category: 'USA', -// categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], -// }, -// { -// category: 'France', -// categoryItems: ['Paris'], -// }, -// ], -// styles: { -// head: { -// background: 'red', -// }, -// list: { -// background: 'green', -// }, -// chips: { -// background: 'blue', -// }, -// }, -// multiselect: true, -// multiselectTag: true, -// }); +const dropdown4 = new DropDown({ + selector: '.cg-dropdown_button', + placeholder: 'Выберите регион', + items: [ + { + category: 'Russia', + categoryItems: [ + { + id: '28qwds', + title: 'Москва', + value: 0, + }, + , + 'Ростов-на-дону', + 'Саратов', + 'Волгоград', + 'Донецк', + ], + }, + { + category: 'USA', + categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], + }, + { + category: 'France', + categoryItems: ['Paris'], + }, + ], + styles: { + head: { + background: 'red', + }, + list: { + background: 'green', + }, + chips: { + background: 'blue', + }, + }, + multiselect: true, + multiselectTag: true, +}); //----------------управление с помощью кнопок---------------------------------- /* const buttonOpen = document.querySelector('.button__open'); diff --git a/src/style/main.scss b/src/style/main.scss index 88696f1..a875e6a 100644 --- a/src/style/main.scss +++ b/src/style/main.scss @@ -214,22 +214,3 @@ input[type='checkbox'] { .displayHide { display: none; } - -.searchSelect { - // border: solid black 1px; - // border-radius: 5px; - display: flex; - align-items: center; - // width: 150px; - // height: 45px; - - textarea { - width: 0.75em; - resize: none; - height: 18px; - background: transparent; - border: none; - outline: 0; - box-shadow: none; - } -} From 482b3799d2d3011b45b5005782fd2d7648efa0a2 Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Tue, 25 Oct 2022 21:03:10 +0300 Subject: [PATCH 3/3] 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 @@
  • #open
  • #render
  • #renderUrl
    • +
  • #searchMode

    • Public methods

    Public methods

    Public methods

    Public methods

      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 @@ +

      + (protected) #searchMode(random) +

      + +
      Метод который реализует поиск элементов в селекте
      + +
      Parameters:
      + + + + + + + + + + + + + + + + + + + + + +
      NameTypeDescription
      random + string + уникальное значение для input элемента.
      + +
      +
      Source:
      +
      + +
      +
      +

      addItem(item) @@ -657,6 +703,7 @@
    • #open
    • #render
    • #renderUrl
      • +
    • #searchMode

    Public methods

      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 @@
    • #open
    • #render
    • #renderUrl
      • +
    • #searchMode

    Public methods

      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 @@
    • #open
    • #render
    • #renderUrl
      • +
    • #searchMode

    Public methods

      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 @@ +

      + (static) createInputSearch(random) → {HTMLInputElement} +

      + +
      Метод который создает поиск элементов в селекте
      + +
      Parameters:
      + + + + + + + + + + + + + + + + + + + + + +
      NameTypeDescription
      random + string + уникальное значение для input элемента.
      + +
      +
      Source:
      +
      + +
      +
      + +
      Returns:
      + +
      Возвращает сформированный input елемент.
      + +
      +
      Type
      +
      + HTMLInputElement +
      +
      +

      (static) createNativeSelect()

    -

    Module

    +

    Modules

    -

    Global

    +

    Private methods

    + +

    Public methods

      -
    • #addOptionsBehaviour
      • -
    • #close
      • -
    • #init
      • -
    • #initEvent
      • -
    • #initSelected
      • -
    • #open
      • -
    • #render
      • -
    • #renderUrl
    • addItem
    • buttonControl
    • deleteItem
      • 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 @@ 
      /**
- * 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 = `
-      <div class="cg-select">
-         <p class="selected">${content}</p>
-          <div class="caret"></div>
-       </div>
-      `;
-  }
-
-  if (styles) {
-    customStyles(element, styles);
-
-    element.innerHTML = `
-      <div class="cg-select" style = "${styles}">
-          <p class="selected" style = "${styles}">${content}</p>
-          <div class="caret" style = "${styles}"></div>
-      </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 && typeof item !== 'object') {
-    return false;
-  }
-
-  return item.hasOwnProperty('id') && item.hasOwnProperty('title') && 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 = `
+                 <div class="cg-select">
+                    <p class="selected">${content}</p>
+                     <div class="caret"></div>
+                  </div>
+                 `;
+             }
+           
+             if (styles) {
+               customStyles(element, styles);
+           
+               element.innerHTML = `
+                 <div class="cg-select" style = "${styles}">
+                     <p class="selected" style = "${styles}">${content}</p>
+                     <div class="caret" style = "${styles}"></div>
+                 </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 && typeof item !== 'object') {
+               return false;
+             }
+           
+             return item.hasOwnProperty('id') && item.hasOwnProperty('title') && 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;
+               }
+             });
+           }
      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 @@ - + 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 {