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

Added search but very bad working

Browse Source
This commit is contained in:
Макс Овсяников 2022-10-24 20:13:08 +03:00
parent 8e517026f2
commit 372d5d4175
5 changed files with 90 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/cg-dropdown.js
View File

@ -5,6 +5,7 @@ import {
customStylesFormat, customStylesFormat,
nativOptionMultiple, nativOptionMultiple,
nativOptionOrdinary, nativOptionOrdinary,
createSelectedSearch,
} from './components/utils'; } from './components/utils';
import { import {
createBreadcrumb, createBreadcrumb,
@ -311,8 +312,9 @@ export class DropDown {
* @protected * @protected
*/ */
#initSelected(select) { #initSelected(select) {
const { styles, selected, placeholder } = this.#options; const { styles, selected, placeholder, searchMode } = this.#options;
console.log(searchMode);
if (selected) { if (selected) {
createSelected(this.#element, selected); createSelected(this.#element, selected);
} else if (placeholder) { } else if (placeholder) {
@ -321,6 +323,9 @@ export class DropDown {
createSelected(this.#element, 'Select...'); createSelected(this.#element, 'Select...');
} }
if (searchMode) {
createSelectedSearch(this.#element);
}
if (styles) { if (styles) {
customStyles(this.#element, styles); customStyles(this.#element, styles);
} }
@ -515,7 +520,7 @@ export class DropDown {
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 search = this.#element.querySelector('#searchSelect');
const ulMultipul = document.createElement('ul'); const ulMultipul = document.createElement('ul');
if (multiselect) { if (multiselect) {
@ -523,6 +528,9 @@ export class DropDown {
select.classList.add('overflow-hidden'); select.classList.add('overflow-hidden');
} }
// console.log(search);
this.searchMode();
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 +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 * Приватный метод экземпляра класса DropDown
* @protected * @protected

17
src/components/utils.js
View File

@ -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 * Поиск и стилизация елементов полученных из styles экземпляра DropDown
* @param {HTMLElement} element созданный экземпляр класса DropDown * @param {HTMLElement} element созданный экземпляр класса DropDown

4
src/index.html
View File

@ -10,10 +10,10 @@
</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> -->

31
src/index.js
View File

@ -3,7 +3,8 @@ 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,21 +20,21 @@ 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',
styles: { // styles: {
head: { // head: {
background: 'black', // background: 'black',
width: '350px', // width: '350px',
}, // },
}, // },
multiselect: true, // multiselect: true,
multiselectTag: true, // multiselectTag: true,
}); // });
// --------------------------------Категории-------------------------- // --------------------------------Категории--------------------------
// const dropdown4 = new DropDown({ // const dropdown4 = new DropDown({

25
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;
@ -210,3 +210,26 @@ input[type='checkbox'] {
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #4d4d4d; 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;
}
}