Форум

nikoshot · #1 (**permalink**) 21.03.2023, 01:27

Могу оплатить 10$ на USDT кошелек

Что нужно.. есть некий html.. это часть фильтра..
В одном списке слишком много значений что бы выбрать..
нужно сделать текстовое поле для ввода текста что бы можно было сразу отфильтровать то что нужно..

Я набросал пример того что нужно https://jsfiddle.net/v2oykuas/7/

А сам пример нашел вот тут https://jsfiddle.net/kboyu0tj/
нужно его адаптировать под мой код..

рони · #2 (**permalink**) 21.03.2023, 06:49

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 &amp; 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>

nikoshot · #3 (**permalink**) 21.03.2023, 13:17

Вроде то что нужно.. чуть позже буду за пк и буду тестить на проекте.. я вам отпишусь.. спасибо!

nikoshot · #4 (**permalink**) 21.03.2023, 14:01

Можно еще сделать одну правку...
Там есть кнопка "показать все"..
Нужно что бы при вводе поиска эта кнопка срабатывала, т.е что бы весь список раскрывался и саму кнопку скрываем..
И возвращаем ее когда пользователь отчистил поле поиска input или нажал на крестик <span>×</span>

Т.е что бы когда мы пользуемся поиском то что бы на мне мешала эта кнопка и не нужно было еще разворачивать отдельно данные..

рони · #5 (**permalink**) 21.03.2023, 14:15

Сообщение от nikoshot

Нужно что бы при вводе поиска эта кнопка срабатывала, т.е что бы весь список раскрывался и саму кнопку скрываем..
И возвращаем ее когда пользователь отчистил поле поиска input или нажал на крестик <span>×</span>

добавлено

nikoshot · #6 (**permalink**) 21.03.2023, 15:02

Сообщение от рони

добавлено

Все отлично.. написал вам вл.. напишите мне в лс номер кошелька

Форум

Справочник

Discord чат

Курсы javascript