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

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

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

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    $(".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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
1
2
3
4
5
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
        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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

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

Решение