Помогите сделать фильтрацию элементов
Могу оплатить 10$ на USDT кошелек
Что нужно.. есть некий html.. это часть фильтра.. В одном списке слишком много значений что бы выбрать.. нужно сделать текстовое поле для ввода текста что бы можно было сразу отфильтровать то что нужно.. Я набросал пример того что нужно https://jsfiddle.net/v2oykuas/7/ А сам пример нашел вот тут https://jsfiddle.net/kboyu0tj/ нужно его адаптировать под мой код.. |
for search label
nikoshot,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.list-group-item {
position: relative;
display: block;
padding: 30px 0 0;
border-top: 1px solid #ececec;
margin: 0 0 30px;
}
.ocfilter-option .ocf-option-name {
font-weight: bold;
font-size: 21px;
line-height: 25px;
margin-right: 8px;
}
.ocfilter-option .ocf-option-values {
overflow: visible;
}
.ocf-option-values label {
display: flex;
cursor: pointer;
align-items: center;
border-radius: 6px;
transition: all 0.2s;
padding: 2px 8px;
box-sizing: unset;
margin: 0;
}
.collapse,
.collapse-value button.collapse,
.ocf-option-values label.collapse {
display: none;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const list = Array.from(document.querySelectorAll('[data-option-id="m"]'));
const divHide = document.querySelector('#ocfilter-hidden-values-m');
const searchItem = function(value) {
divHide.classList.toggle('collapse', !value);
document.querySelector('.collapse-value button').classList.toggle('collapse', !!value)
list.forEach(function(label) {
const aTxt = label.textContent.toLowerCase();
const aI = aTxt.indexOf(value);
label.classList.toggle('collapse', aI == -1);
});
}
document.querySelector('#option-m').addEventListener('input', function(event) {
let val = document.querySelector('#option-m input').value.toLowerCase().trim();
searchItem(val);
})
document.querySelector('#option-m span').addEventListener('click', function(event) {
document.querySelector('#option-m input').value = '';
searchItem('');
})
document.querySelector('.collapse-value button').addEventListener('click', function(event) {
event.preventDefault();
divHide.classList.toggle('collapse');
})
})
</script>
</head>
<body>
<div class="list-group-item ocfilter-option" id="option-m">
<div class="ocf-option-name">
Производитель
<input type="text" placeholder="Поиск..."><span>×</span>
</div>
<div class="ocf-option-values">
<label id="v-m298" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:298" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">ACER</span>
<small class="badge">18</small>
</label>
<label id="v-m179" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:179" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">AKG</span>
<small class="badge">4</small>
</label>
<label id="v-m143" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:143" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">APPLE</span>
<small class="badge">238</small>
</label>
<div class="collapse" id="ocfilter-hidden-values-m" aria-expanded="false" style="height: 0px;">
<hr style="margin:0 0 10px;">
<label id="v-m154" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:154" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">ASUS</span>
<small class="badge">42</small>
</label>
<label id="v-m180" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:180" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">Bang & Olufsen</span>
<small class="badge">38</small>
</label>
<label id="v-m206" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:206" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">BEATS</span>
<small class="badge">7</small>
</label>
<label id="v-m210" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:210" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">BOSE</span>
<small class="badge">12</small>
</label>
<label id="v-m320" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:320" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">CANON</span>
<small class="badge">41</small>
</label>
<label id="v-m306" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:306" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">DELL</span>
<small class="badge">34</small>
</label>
<label id="v-m418" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:418" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">FUJIFILM</span>
<small class="badge">18</small>
</label>
<label id="v-m232" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:232" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">HARMAN-KARDON</span>
<small class="badge">5</small>
</label>
<label id="v-m220" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:220" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">HONOR</span>
<small class="badge">21</small>
</label>
<label id="v-m213" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:213" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">HP</span>
<small class="badge">122</small>
</label>
<label id="v-m9" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:9" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">Huawei</span>
<small class="badge">57</small>
</label>
<label id="v-m160" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:160" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">JBL</span>
<small class="badge">72</small>
</label>
<label id="v-m297" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:297" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">LENOVO</span>
<small class="badge">67</small>
</label>
<label id="v-m159" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:159" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">MARSHALL</span>
<small class="badge">30</small>
</label>
<label id="v-m187" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:187" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">MOTOROLA</span>
<small class="badge">28</small>
</label>
<label id="v-m321" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:321" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">NIKON</span>
<small class="badge">26</small>
</label>
<label id="v-m162" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:162" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">PANASONIC</span>
<small class="badge">8</small>
</label>
<label id="v-m6" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:6" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">Samsung</span>
<small class="badge">227</small>
</label>
<label id="v-m158" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:158" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">SONY</span>
<small class="badge">28</small>
</label>
<label id="v-m724" data-option-id="m">
<input type="checkbox" name="ocf[m]" value="m:724" class="ocf-target" autocomplete="off">
<span class="ocf-label-text">Xbox</span>
<small class="badge">2</small>
</label>
</div>
<div class="collapse-value">
<button type="button" data-target="#ocfilter-hidden-values-m" data-toggle="collapse" class="btn btn-block collapsed" aria-expanded="false">Показать все <i class="filter__close filter__close_mini"></i></button>
</div>
</div>
</div>
</body>
</html>
|
Вроде то что нужно.. чуть позже буду за пк и буду тестить на проекте.. я вам отпишусь.. спасибо!
|
Можно еще сделать одну правку...
Там есть кнопка "показать все".. Нужно что бы при вводе поиска эта кнопка срабатывала, т.е что бы весь список раскрывался и саму кнопку скрываем.. И возвращаем ее когда пользователь отчистил поле поиска input или нажал на крестик <span>×</span> Т.е что бы когда мы пользуемся поиском то что бы на мне мешала эта кнопка и не нужно было еще разворачивать отдельно данные.. |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 21:58. |