javascript — поиск нескольких слов и выделение результатов

Поиск нескольких слов и выделить результаты

Это оригинальный код:

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1"{amp}gt; {amp}lt;style{amp}gt; * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } {amp}lt;/style{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;h2{amp}gt;My Customers{amp}lt;/h2{amp}gt; {amp}lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"{amp}gt; {amp}lt;table id="myTable"{amp}gt; {amp}lt;tr class="header"{amp}gt; {amp}lt;th style="width:60%;"{amp}gt;Name{amp}lt;/th{amp}gt; {amp}lt;th style="width:40%;"{amp}gt;Country{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Alfreds Futterkiste{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Germany{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Berglunds snabbkop{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Sweden{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Island Trading{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;UK{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Koniglich Essen{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Germany{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Laughing Bacchus Winecellars{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Canada{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Magazzini Alimentari Riuniti{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Italy{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;North/South{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;UK{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Paris specialites{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;France{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;script{amp}gt; function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i {amp}lt; tr.length; i  ) { td = tr[i].getElementsByTagName("td")[0]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) {amp}gt; -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Как видите, вы перебираете все строки таблицы и, если текст не совпадает, вы скрываете строку:

 tr[i].style.display = "none"; 

Если строка совпадает, вы очищаете display:hidden , делая его снова видимым

 tr[i].style.display = ""; 

Вы можете заменить их вашими собственными стилями.
Например, измените фон всех строк, которые соответствуют желтый:

 if (txtValue.toUpperCase().indexOf(filter) {amp}gt; -1) { tr[i].style.backgroundColor = "yellow"; } else { tr[i].style.backgroundColor = "white"; } 

Если вы хотите выделить только ту часть, которая соответствует, вы можете обернуть все вхождения в диапазон с классом для стиля:

  if (txtValue.indexOf(filter) {amp}gt; -1) {    tr[i].innerHTML = tr[i].innerHTML.replace(filter, `{amp}lt;span class="highlight"{amp}gt;${filter}{amp}lt;/span{amp}gt;`)    } 

И удаляем существующие блики каждый раз:

 const existing = document.getElementsByClassName("highlight"); Array.from(existing).forEach(e ={amp}gt; e.outerHTML=e.innerHTML) 

Поэтому создаем весь код:

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1"{amp}gt; {amp}lt;style{amp}gt; * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px;12p } #myTable { border-collapse: collapse; width: 100% border: 1px solid #ddd; font-size: 18px; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } .highlight{ background:yellow; } {amp}lt;/style{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;h2{amp}gt;My Customers{amp}lt;/h2{amp}gt; {amp}lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"{amp}gt; {amp}lt;table id="myTable"{amp}gt; {amp}lt;tr class="header"{amp}gt; {amp}lt;th style="width:60%;"{amp}gt;Name{amp}lt;/th{amp}gt; {amp}lt;th style="width:40%;"{amp}gt;Country{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Alfreds Futterkiste{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Germany{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Berglunds snabbkop{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Sweden{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Island Trading{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;UK{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Koniglich Essen{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Germany{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Laughing Bacchus Winecellars{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Canada{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Magazzini Alimentari Riuniti{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Italy{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;North/South{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;UK{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;Paris specialites{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;France{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;script{amp}gt; function myFunction() { const existing = document.getElementsByClassName("highlight"); Array.from(existing).forEach(e ={amp}gt; e.outerHTML=e.innerHTML) var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value; table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i {amp}lt; tr.length; i  ) { td = tr[i].getElementsByTagName("td")[0]; if (td) { txtValue = td.textContent || td.innerText;   if (txtValue.indexOf(filter) {amp}gt; -1) {    tr[i].innerHTML = tr[i].innerHTML.replace(filter, `{amp}lt;span class="highlight"{amp}gt;${filter}{amp}lt;/span{amp}gt;`)    } else { } } } } {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Простите за ужасный отступ, я на мобильном

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector