Search in the working!
This commit is contained in:
parent
372d5d4175
commit
19a857280d
@ -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);
|
||||
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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -31,23 +31,6 @@ export function createSelected(element, content, styles) {
|
||||
}
|
||||
}
|
||||
|
||||
export function createSelectedSearch(element) {
|
||||
if (element) {
|
||||
element.innerHTML = `
|
||||
<div class="cg-select">
|
||||
<div class="searchSelect">
|
||||
<p class="selected"></p>
|
||||
<textarea autofocus type="text" id="searchSelect" ></textarea>
|
||||
|
||||
</div>
|
||||
<div class="caret"></div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Поиск и стилизация елементов полученных из styles экземпляра DropDown
|
||||
* @param {HTMLElement} element созданный экземпляр класса DropDown
|
||||
|
||||
@ -14,9 +14,9 @@
|
||||
|
||||
<button class="cg-dropdown cg-dropdown_one"></button>
|
||||
<!-- <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>
|
||||
</body>
|
||||
<script type="module" src="index.js"></script>
|
||||
|
||||
86
src/index.js
86
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');
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user