search in DOM

by tomik23

HTML

<div class="form">
    <input type="text" id="search" name="search" placeholder="szukaj ...">
  </div>

  <ul id="ul">
    <li>text 1</li>
    <li>text 2</li>
    <li>text 3</li>
    <li>text 4</li>
    <li>text 5</li>
    <li>text 6</li>
    <li>text 7</li>
    <li>text 8</li>
    <li>text 9</li>
    <li>text 10</li>
    <li>text 11</li>
    <li>text 12</li>
    <li>text 13</li>
    <li>text 14</li>
    <li>text 15</li>
    <li>text 16</li>
    <li>text 17</li>
    <li>text 18</li>
    <li>text 19</li>
    <li>text 20</li>
  </ul>

CSS

ul {
      border: 1px solid #cacaca;
      list-style: none;
      width: 100%;
      max-width: 400px;
      margin: 0;
      padding: 0;
      column-count: 2;
      column-width: 50%;
      padding: 10px;
      margin: auto;
    }

    ul li {
      padding: 10px;
      margin-bottom: 2px;
    }

    ul li:nth-child(even) {
      background-color: #f0f0f0;
    }

    input[type=text] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    .form {
      border-radius: 5px;
      background-color: #f2f2f2;
      padding: 10px;
      width: 100%;
      max-width: 400px;
      margin: 0 auto 20px;
    }

JavaScript

function searchText() {
      const input = document.getElementById('search');
      const filter = input.value.toUpperCase();
      const ul = document.getElementById('ul');
      const lists = ul.getElementsByTagName('li');

      if (input.value.length) {
        ul.setAttribute('style', 'column-count: 1;');
      } else {
        ul.setAttribute('style', 'column-count: 2');
      }

      for (i = 0; i < lists.length; i++) {
        item = lists[i].textContent;
        if (item.toUpperCase().indexOf(filter) > -1) {
          lists[i].style.display = '';
        } else {
          lists[i].style.display = 'none';
        }
      }
    };

    window.addEventListener('keyup', searchText);