Home
+CG-SELECT
+ -- Вернуться к примеру --Этот компонент предлагает более гибкую настройку и использование селекта. Так же - реализованны методы взаимодействия с селектом + реализованны методы взаимодействия с селектом.
Для создания компонета нужно:
diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js index 5ad7e7f..9bab76a 100644 --- a/src/cg-dropdown.js +++ b/src/cg-dropdown.js @@ -388,6 +388,8 @@ export class DropDown { */ #render(select) { const { styles, multiselect, searchMode, multiselectTag, darkTheme, lenguage } = this.#options; + const { list, search } = styles; + const random = Math.random().toString(36).substring(2, 10); if (select || (select && styles)) { @@ -409,14 +411,13 @@ export class DropDown { } else { intputSearch = createInputSearch(random, en.placeholder); } - + customStylesFormat(search, intputSearch); ulList.appendChild(intputSearch); } ulList.classList.add('list'); if (styles) { - const { list } = styles; customStylesFormat(list, ulList); } @@ -756,15 +757,15 @@ export class DropDown { }); input.oninput = function () { - let val = this.value.trim(); + let valueSearch = this.value.trim().toLowerCase(); let anyMatch = false; - if (val != '') { + if (valueSearch != '') { searchSelect.forEach((elem) => { - let isMatching = new RegExp(val, 'gi').test(elem.textContent); + let isMatching = new RegExp(valueSearch, 'gi').test(elem.textContent); anyMatch = anyMatch || isMatching; - if (elem.innerText.search(val) == -1) { + if (elem.textContent.toLowerCase().search(valueSearch) == -1) { elem.classList.add('displayHide'); } else { elem.classList.remove('displayHide'); diff --git a/src/index.html b/src/index.html index 60d7b7b..d5d45f0 100644 --- a/src/index.html +++ b/src/index.html @@ -10,8 +10,17 @@CG-SELECT
-
+
+
+
+ CG-SELECT
+
+ +