Код JQuery на чистый JavaScript

@magistrat4797 · Регистрация: 15.11.2014

Author24 — интернет-сервис помощи студентам

Здравстуйте. Столкнулся с проблемой начинающего Веб-программиста. Нашел рабочий скрипт написанный на JQuery высветляющий значение "No Results" при введении в input несуществующего значения в таблице("Живой поиск"). Пробовал переписать самостоятельно, читать документацию, но безуспешно. Помогите переписать его на чистый JS.
Код в JQuery:

Javascript

    $(".search").keyup(function () {
    var search = $(this).val();
    $(".list").children().show();
    $('#noresults').remove();
    if (search) {
        $(".list").children().not(":containsNoCase(" + search + ")").hide();
        $(".list").each(function () {
            if ($(this).children(':visible').length == 0) 
              $(this).append('<tr class="noresults"><td style="text-align:center; font-size:17px; padding:25px 0 25px 0!important">No Results</td></tr>');
        });
 
    }
});
 
$.expr[":"].containsNoCase = function (el, i, m) {
    var search = m[3];
    if (!search) return false;
    return new RegExp(search, "i").test($(el).text());
};

Добавлено через 17 минут
Неудачная попытка на чистом JS:

Javascript

document.getElementByClassName('search').onkeyup = function() {
      var search = this.value;
      document.getElementByClassName('list').children().show();
      document.getElementById('noresults').remove();
      if(search) {
        document.getElementByClassName('list').children().not(":containsNoCase(" + search + ")").hide();
        document.getElementByClassName('list').each = function () {
          if(this.children(':visible').length == 0)
            this.append('<tr class="noresults"><td style="text-align:center; font-size:17px; padding:25px 0 25px 0!important">No Results</td></tr>');      
        }
      }
    };
 
expr[":"].containsNoCase = function (el, i, m) {
    var search = m[3];
    if (!search) return false;
    return new RegExp(search, "i").test($(el).text());
};

Особенно не могу найти альтернативу на JS для второй функции:

Javascript

expr[":"].containsNoCase = function (el, i, m) {
    var search = m[3];
    if (!search) return false;
    return new RegExp(search, "i").test($(el).text());
};

Добавлено через 8 минут
Сам скрипт, собственно, взят отсюда:
http://jsfiddle.net/bk13detv/26/

@diadiavova · 23.08.2018, 00:54

magistrat4797, решение "в лоб" будет выглядеть примерно так

Javascript

        document.getElementById("my-search-input")
            .addEventListener("keyup", function (evt)
            {
                let mylist = document.querySelectorAll(".my-list");
                for (let tbody of mylist)
                {
                    let noresults = true;
                    let noresultsrow = tbody.querySelectorAll(".noresults");
                    if (noresultsrow.length > 0)
                        for (let row of noresultsrow)
                            row.parentElement.removeChild(row);
                    for (let row of tbody.querySelectorAll("tr"))
                    {
                        let includes =
                            row.textContent
                                .toLowerCase()
                                .search(evt.target.value.toLowerCase()) > -1;
                        if (includes) noresults = false;
                        row.style.display = includes ? "" : "none";
                    }
                    if (noresults)
                    {
                        tbody.innerHTML += "<tr class='noresults'><td colspan='3'><em>No Results</em></td></tr>";
                    }
                }
            });

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

Особенно не могу найти альтернативу на JS для второй функции:

Эта функция добавляет новый селектор в жквери и актуальна только если использовать этот фреймворк. Так что ее никак не перепишешь, там просто в основном коде вместо использования этого нового селектора надо выполнять работу, описанную в этой функции.

@Qwerty_Wasd · 23.08.2018, 09:54

diadiavova, приветствую

magistrat4797, еще вариант - https://codepen.io/qwerty_wasd/pen/wEaWNP

Javascript

let searchInput = document.getElementById('my-search-input'),
    posCell = document.querySelectorAll('.my-list td'),
    envTableBody = document.getElementsByClassName('my-list');
 
//сразу добавим таблицам футер, чтобы потом просто показывать по условию
Array.from(envTableBody,e => e.insertAdjacentHTML("beforeBegin",`<tfoot class='footer-result' style='display:none'><tr><td colspan="3"><em>No Results</em></td></tr><tfoot>`));
 
const searchPatt = () => {
 
  //для каждой ячейки сделаем отдельно проверку на пробелы
  posCell.forEach(e => e.parentElement.style = (searchInput.value.trim()=='') ? 'display:table-row' : 'display:none');
 
  //далее отфильтруем по паттерну и покажем строки прошедших по нему
  [...posCell].filter(e => e.textContent.trim().match(new RegExp(`^${searchInput.value}`,'i'))).forEach(e => e.parentElement.style = 'display:table-row');
 
  // и сравнивая  tbody по детям с display:none с общим их кол-вом, покажем футер в случае совпадения
  Array.from(envTableBody, (e,i)=>{
    document.getElementsByClassName('footer-result')[i].style = ([...e.children].filter(el => el.style.display == 'none').length === e.children.length) ? 'display:table-footer-group' : 'display:none';
  });
}
 
searchInput.addEventListener('input',searchPatt);
//далее, если понадобится, можно удалить обработчик.

HTML5

<section>
  <input id="my-search-input" type="text" placeholder="Search list"/>
  <div class="something">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>2nd column</th>
          <th>3rd column</th>
        </tr>
      </thead>
      <tbody class="my-list">
        <tr>
          <td>Lorem ipsum</td>
          <td>123</td>
          <td>Right</td>
        </tr>
        <tr>
          <td>Dolor sit</td>
          <td>100</td>
          <td>Wrong</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="something">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>2nd column</th>
          <th>3rd column</th>
        </tr>
      </thead>
      <tbody class="my-list">
        <tr>
          <td>Element</td>
          <td>321</td>
          <td>Something</td>
        </tr>
        <tr>
          <td>More elements</td>
          <td>444</td>
          <td>Cowabunga</td>
        </tr>
        <tr>
          <td>boom</td>
          <td>yo</td>
          <td>enough</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

CSS

input {
    padding: 10px 8px;
    width: 300px;
}
table {
    background-color: lightgrey;
    margin: 24px 0;
    text-align: left;
    width: 100%;
}
th {
    background-color: darkgrey;
}
th, td {
    padding: 4px 8px;
}

	23.08.2018, 09:54

Код JQuery на чистый JavaScript

Решение