apuc/cg-select
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #14 from apuc/add-search

Browse Source 
Add search method
This commit is contained in:
MaxOvs19 2022-10-25 21:06:49 +03:00 committed by GitHub
commit 23f12be5a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 1189 additions and 834 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
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
View File

@ -127,6 +127,7 @@
<li><a href="global.html#open">#open</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#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>

1
documentation/DropDown.html
View File

@ -137,6 +137,7 @@
<li><a href="global.html#open">#open</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#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>

1246
documentation/cg-dropdown.js.html
View File

File diff suppressed because it is too large Load Diff

151
documentation/create-element.js.html
View File

@ -21,75 +21,117 @@
<article> <article>
<pre <pre
class="prettyprint source linenums" class="prettyprint source linenums"
><code>import { customStylesFormat } from './utils'; ><code>import { customStylesFormat, nativOptionMultiple } from './utils';
/** /**
* @module createElementChips * @module createBreadcrumb
*/ */
/** /**
* Метод который создает и отвечает за поведение chips * Метод который создает и отвечает за поведение chips
* @param {object} data объект в котором содержатся настройки и элементы селекта * @param {object} data объект в котором содержатся настройки и элементы селекта
* @param {string} title имя выбранного элемента для отрисовки chips * @param {string} title имя выбранного элемента для отрисовки chips
* @param {number} index индекс выбранного элемента для отрисовки chips * @param {number} index индекс выбранного элемента для отрисовки chips
* @param {string} id уникальное id выбранного элемента * @param {string} id уникальное id выбранного элемента
* @returns {HTMLElement} возвращает сформированный HTMLElement chips item * @returns {HTMLElement} возвращает сформированный HTMLElement chips item
*/ */
export function createBreadcrumb(data, title, index, id) { export function createBreadcrumb(data, title, index, id) {
const { element, option, indexes, selectedItems } = data; const { element, option, indexes, selectedItems } = data;
const { placeholder, styles } = option; const { placeholder, styles } = option;
const selected = element.querySelector('.selected'); const selected = element.querySelector('.selected');
const liChip = document.createElement('li'); const nativOption = element.querySelectorAll('.nativSelect__nativOption');
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'); const liChip = document.createElement('li');
path1.setAttribute('d', 'M3,7 L7,3'); const textNode = document.createTextNode(title);
path2.setAttribute('d', 'M3,3 L7,7'); const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
liChip.setAttribute('id', `tag-${index}-${id}`); const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
svgIcon.classList.add('svg-icon'); 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.appendChild(path1); svgIcon.classList.add('svg-icon');
svgIcon.appendChild(path2);
liChip.appendChild(textNode);
liChip.appendChild(svgIcon);
if (styles) { svgIcon.appendChild(path1);
const { chips } = styles; svgIcon.appendChild(path2);
customStylesFormat(chips, liChip); liChip.appendChild(textNode);
} liChip.appendChild(svgIcon);
svgIcon.addEventListener('click', (event) => { if (styles) {
event.stopPropagation(); const { chips } = styles;
customStylesFormat(chips, liChip);
}
const deleteIcon = indexes.indexOf(index); svgIcon.addEventListener('click', (event) => {
event.stopPropagation();
nativOptionMultiple(nativOption, title, false);
indexes.splice(deleteIcon, 1); const deleteIcon = indexes.indexOf(index);
selectedItems.splice(deleteIcon, 1); let checkBox = '';
let checkBox = ''; indexes.splice(deleteIcon, 1);
selectedItems.splice(deleteIcon, 1);
if (id) { if (id) {
checkBox = document.getElementById(`chbox-${id}`); checkBox = document.getElementById(`chbox-${id}`);
} else { } else {
checkBox = document.getElementById(`chbox-${index}`); checkBox = document.getElementById(`chbox-${index}`);
} }
checkBox.checked = false; checkBox.checked = false;
checkBox.parentElement.classList.remove('active'); checkBox.parentElement.classList.remove('active');
if (!selectedItems.length) { if (!selectedItems.length) {
selected.innerText = placeholder; selected.innerText = placeholder;
} }
liChip.parentElement.removeChild(liChip); liChip.parentElement.removeChild(liChip);
}); });
return 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> </code></pre>
</article> </article>
</section> </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#open">#open</a></li>
<li><a href="global.html#render">#render</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#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>

47
documentation/global.html
View File

@ -301,6 +301,52 @@
</dd> </dd>
</dl> </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"> <h4 class="name" id="addItem">
<span class="type-signature"></span>addItem<span class="signature">(item)</span <span class="type-signature"></span>addItem<span class="signature">(item)</span
><span class="type-signature"></span> ><span class="type-signature"></span>
@ -657,6 +703,7 @@
<li><a href="global.html#open">#open</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#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>

1
documentation/index.html
View File

@ -47,6 +47,7 @@
<li><a href="global.html#open">#open</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#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>

1
documentation/module-Utils.html
View File

@ -379,6 +379,7 @@
<li><a href="global.html#open">#open</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#render">#render</a></li>
<li><a href="global.html#renderUrl">#renderUrl</a></li> <li><a href="global.html#renderUrl">#renderUrl</a></li>
<li><a href="global.html#searchMode">#searchMode</a></li>
</ul> </ul>
<h3>Public methods</h3> <h3>Public methods</h3>
<ul> <ul>

81
documentation/module-createElementChips.html
View File

@ -114,6 +114,63 @@
</dd> </dd>
</dl> </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"> <h4 class="name" id=".createNativeSelect">
<span class="type-signature">(static) </span>createNativeSelect<span class="signature" <span class="type-signature">(static) </span>createNativeSelect<span class="signature"
>()</span >()</span
@ -192,21 +249,25 @@
> >
</li> </li>
</ul> </ul>
<h3>Module</h3> <h3>Modules</h3>
<ul> <ul>
<li><a href="module-Utils.html">Utils</a></li> <li><a href="module-Utils.html">Utils</a></li>
<li><a href="module-createElementChips.html">createElementChips</a></li> <li><a href="module-createElementChips.html">createElementChips</a></li>
</ul> </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> <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#addItem">addItem</a></li>
<li><a href="global.html#buttonControl">buttonControl</a></li> <li><a href="global.html#buttonControl">buttonControl</a></li>
<li><a href="global.html#deleteItem">deleteItem</a></li> <li><a href="global.html#deleteItem">deleteItem</a></li>

231
documentation/utils.js.html
View File

@ -20,122 +20,151 @@
<section> <section>
<article> <article>
<pre class="prettyprint source linenums"><code>/** <pre class="prettyprint source linenums"><code>/**
* Utils module * Utils module
* @module Utils; * @module Utils
*/ */
/** /**
* Создание кнопки выбора элементов * Создание кнопки выбора элементов
* @param {HTMLElement} element созданный экземпляр класса DropDown * @param {HTMLElement} element созданный экземпляр класса DropDown
* @param {string} content placeholer передаваемый из настроек селекта * @param {string} content placeholer передаваемый из настроек селекта
* @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта * @param {object} styles не обязательный параметр. Объект в котором находяться настройки кастомизации частей селекта
*/ */
export function createSelected(element, content, styles) { export function createSelected(element, content, styles) {
if (content) { if (content) {
element.innerHTML = ` element.innerHTML = `
&lt;div class="cg-select"> &lt;div class="cg-select">
&lt;p class="selected">${content}&lt;/p> &lt;p class="selected">${content}&lt;/p>
&lt;div class="caret">&lt;/div> &lt;div class="caret">&lt;/div>
&lt;/div> &lt;/div>
`; `;
} }
if (styles) { if (styles) {
customStyles(element, styles); customStyles(element, styles);
element.innerHTML = ` element.innerHTML = `
&lt;div class="cg-select" style = "${styles}"> &lt;div class="cg-select" style = "${styles}">
&lt;p class="selected" style = "${styles}">${content}&lt;/p> &lt;p class="selected" style = "${styles}">${content}&lt;/p>
&lt;div class="caret" style = "${styles}">&lt;/div> &lt;div class="caret" style = "${styles}">&lt;/div>
&lt;/div> &lt;/div>
`; `;
} }
} }
/** /**
* Поиск и стилизация елементов полученных из styles экземпляра DropDown * Поиск и стилизация елементов полученных из styles экземпляра DropDown
* @param {HTMLElement} element созданный экземпляр класса DropDown * @param {HTMLElement} element созданный экземпляр класса DropDown
* @param {object} styles объект в котором находяться настройки кастомизации частей селекта * @param {object} styles объект в котором находяться настройки кастомизации частей селекта
*/ */
export function customStyles(element, styles) { export function customStyles(element, styles) {
if (!styles) { if (!styles) {
return; return;
} }
const { head, caret, placeholder } = styles; const { head, caret, placeholder } = styles;
const cgSelect = element.querySelector('.cg-select'); const cgSelect = element.querySelector('.cg-select');
const caretSelect = element.querySelector('.caret'); const caretSelect = element.querySelector('.caret');
const placeholderSelect = element.querySelector('.selected'); const placeholderSelect = element.querySelector('.selected');
customStylesFormat(head, cgSelect); customStylesFormat(head, cgSelect);
customStylesFormat(caret, caretSelect); customStylesFormat(caret, caretSelect);
if (placeholderSelect) { if (placeholderSelect) {
customStylesFormat(placeholder, placeholderSelect); customStylesFormat(placeholder, placeholderSelect);
} }
} }
// export function customStylesFormat(elemOption, selector) { /**
// if (elemOption) { * Универсальный метод для стилизации селекта
// Object.entries(elemOption).forEach(([key, value]) => { * @param {object} elemOption объект полученное из объекта styles у которого мы получаем ключ-значение стилей
// selector.style[key] = value; * @param {HTMLElement} selector HTMLElement подвергающиеся кастомизации
// }); */
// } 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 указанные свойства, * Проверка содержит ли item указанные свойства,
* @param {object} item проверяемый на определенную структуру элемент * @param {object} item проверяемый на определенную структуру элемент
* @returns {boolean} возвращает true/false если item содержит указанные свойства * @returns {boolean} возвращает true/false если item содержит указанные свойства
*/ */
export function checkItemStruct(item) { export function checkItemStruct(item) {
if (item &amp;&amp; typeof item !== 'object') { if (item &amp;&amp; typeof item !== 'object') {
return false; return false;
} }
return item.hasOwnProperty('id') &amp;&amp; item.hasOwnProperty('title') &amp;&amp; item.hasOwnProperty('value'); return item.hasOwnProperty('id') &amp;&amp; item.hasOwnProperty('title') &amp;&amp; item.hasOwnProperty('value');
} }
/** /**
* Преобразование каждого елемента полученного из поля Items; * Преобразование каждого елемента полученного из поля Items;
* @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string * @param {object | string} dataItem полученный елемент переданный при создании селекта может быть как object/string
* @param {number} index индекс этого элемента * @param {number} index индекс этого элемента
* @returns {object} возвращает сформированный объект * @returns {object} возвращает сформированный объект
*/ */
export function getFormatItem(dataItem, index) { export function getFormatItem(dataItem, index) {
const random = Math.random().toString(36).substring(2, 10); const random = Math.random().toString(36).substring(2, 10);
let item = {}; let item = {};
if (checkItemStruct(dataItem)) { if (checkItemStruct(dataItem)) {
item = { item = {
id: dataItem.id, id: dataItem.id,
title: dataItem.title, title: dataItem.title,
value: index, value: index,
}; };
} else { } else {
item = { item = {
id: random, id: random,
title: dataItem, title: dataItem,
value: index, value: index,
}; };
} }
return item; 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> </code></pre>
</article> </article>
</section> </section>

58
src/cg-dropdown.js
View File

@ -8,6 +8,7 @@ import {
} from './components/utils'; } from './components/utils';
import { import {
createBreadcrumb, createBreadcrumb,
createInputSearch,
createNativSelectOption, createNativSelectOption,
createNativeSelect, createNativeSelect,
} from './components/create-element'; } from './components/create-element';
@ -338,7 +339,8 @@ export class DropDown {
* @description Рендер елементов в селекте. * @description Рендер елементов в селекте.
*/ */
#render(select) { #render(select) {
const { styles, multiselect } = this.#options; const { styles, multiselect, searchMode } = this.#options;
const random = Math.random().toString(36).substring(2, 10);
if (select || (select && styles)) { if (select || (select && styles)) {
this.#initSelected(select); this.#initSelected(select);
@ -348,9 +350,15 @@ export class DropDown {
} }
const ulList = document.createElement('ul'); const ulList = document.createElement('ul');
const intputSearch = createInputSearch(random);
this.random = random;
const nativSelect = createNativeSelect(); const nativSelect = createNativeSelect();
ulList.classList.add('list'); ulList.classList.add('list');
if (searchMode) {
ulList.appendChild(intputSearch);
}
if (styles) { if (styles) {
const { list } = styles; const { list } = styles;
@ -510,12 +518,11 @@ export class DropDown {
* @method #addOptionsBehaviour * @method #addOptionsBehaviour
*/ */
#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 options = this.#element.querySelectorAll('.list__item');
const select = this.#element.querySelector('.selected'); const select = this.#element.querySelector('.selected');
const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption'); const nativOption = this.#element.querySelectorAll('.nativSelect__nativOption');
const ulMultipul = document.createElement('ul'); const ulMultipul = document.createElement('ul');
if (multiselect) { if (multiselect) {
@ -523,6 +530,10 @@ export class DropDown {
select.classList.add('overflow-hidden'); select.classList.add('overflow-hidden');
} }
if (searchMode && searchMode === true) {
this.#searchMode(this.random);
}
options.forEach((option, index) => { options.forEach((option, index) => {
option.addEventListener('click', (event) => { option.addEventListener('click', (event) => {
const item = this.#items[index]; const item = this.#items[index];
@ -603,6 +614,47 @@ export class DropDown {
}); });
} }
/**
* Метод который реализует поиск элементов в селекте
* @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 * Приватный метод экземпляра класса DropDown
* @protected * @protected

16
src/components/create-element.js
View File

@ -93,3 +93,19 @@ export function createNativSelectOption() {
nativOption.classList.add('nativSelect__nativOption'); nativOption.classList.add('nativSelect__nativOption');
return 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;
}

6
src/index.html
View File

@ -10,13 +10,13 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<form id="data" action="handler.php"></form> <!-- <form id="data" action="handler.php"></form> -->
<button class="cg-dropdown cg-dropdown_one"></button> <button class="cg-dropdown cg-dropdown_one"></button>
<input type="submit" form="data" value="Отправить" /> <!-- <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> --> <button class="cg-dropdown cg-dropdown_button" style="margin-top: 50px"></button>
</div> </div>
</body> </body>
<script type="module" src="index.js"></script> <script type="module" src="index.js"></script>

89
src/index.js
View File

@ -4,6 +4,7 @@ import { DropDown } from './cg-dropdown';
const dropdown = new DropDown({ const dropdown = new DropDown({
selector: '.cg-dropdown_one', selector: '.cg-dropdown_one',
placeholder: 'Выберите авто', placeholder: 'Выберите авто',
searchMode: true,
items: [ items: [
'BMW', 'BMW',
{ {
@ -19,12 +20,13 @@ const dropdown = new DropDown({
multiselectTag: true, multiselectTag: true,
}); });
dropdown.disabled(false); // dropdown.disabled(false);
// ------------------------------URL-------------------- // ------------------------------URL--------------------
const dropdown3 = new DropDown({ const dropdown3 = new DropDown({
selector: '.cg-dropdown_three', selector: '.cg-dropdown_three',
placeholder: 'URL', placeholder: 'URL',
url: 'http://jsonplaceholder.typicode.com/users', url: 'http://jsonplaceholder.typicode.com/users',
searchMode: true,
styles: { styles: {
head: { head: {
background: 'black', background: 'black',
@ -36,48 +38,49 @@ const dropdown3 = new DropDown({
}); });
// --------------------------------Категории-------------------------- // --------------------------------Категории--------------------------
// const dropdown4 = new DropDown({ const dropdown4 = new DropDown({
// selector: '.cg-dropdown_button', selector: '.cg-dropdown_button',
// placeholder: 'Выберите регион', placeholder: 'Выберите регион',
// items: [ searchMode: true,
// { items: [
// category: 'Russia', {
// categoryItems: [ category: 'Russia',
// { categoryItems: [
// id: '28qwds', {
// title: 'Москва', id: '28qwds',
// value: 0, title: 'Москва',
// }, value: 0,
// , },
// 'Ростов-на-дону', ,
// 'Саратов', 'Ростов-на-дону',
// 'Волгоград', 'Саратов',
// 'Донецк', 'Волгоград',
// ], 'Донецк',
// }, ],
// { },
// category: 'USA', {
// categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'], category: 'USA',
// }, categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
// { },
// category: 'France', {
// categoryItems: ['Paris'], category: 'France',
// }, categoryItems: ['Paris'],
// ], },
// styles: { ],
// head: { styles: {
// background: 'red', head: {
// }, background: 'red',
// list: { },
// background: 'green', list: {
// }, background: 'green',
// chips: { },
// background: 'blue', chips: {
// }, background: 'blue',
// }, },
// multiselect: true, },
// multiselectTag: true, multiselect: true,
// }); multiselectTag: true,
});
//----------------управление с помощью кнопок---------------------------------- //----------------управление с помощью кнопок----------------------------------
/* const buttonOpen = document.querySelector('.button__open'); /* const buttonOpen = document.querySelector('.button__open');

18
src/style/main.scss
View File

@ -29,7 +29,7 @@ body {
.cg-select { .cg-select {
padding: 5px; padding: 5px;
flex-grow: 1;
min-height: 50px; min-height: 50px;
color: #fff; color: #fff;
display: flex; display: flex;
@ -105,6 +105,18 @@ body {
background: #8282822c; background: #8282822c;
} }
} }
.inputSearch {
background: transparent;
border: none;
border-bottom: 1px solid white;
margin-top: 5px;
margin-bottom: 5px;
&:focus {
outline: none;
}
}
} }
.multiselect-tag { .multiselect-tag {
@ -210,3 +222,7 @@ input[type='checkbox'] {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #4d4d4d; background-color: #4d4d4d;
} }
.displayHide {
display: none;
}