From 19a857280d9aad42f7b78c95e3c58f34950b55dc Mon Sep 17 00:00:00 2001 From: MaxOvs Date: Tue, 25 Oct 2022 16:07:12 +0300 Subject: [PATCH] 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; - } -}