Added search but very bad working
This commit is contained in:
parent
8e517026f2
commit
372d5d4175
@ -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
|
||||
|
||||
@ -31,6 +31,23 @@ 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
|
||||
|
||||
@ -10,10 +10,10 @@
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<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_button" style="margin-top: 50px"></button> -->
|
||||
|
||||
31
src/index.js
31
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({
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user