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;
+ }
+}