JavaScript — выделить буквы, которые я печатаю, как поиск Google

Выделите буквы, которые я печатаю, например, поиск в Google

 $(document).ready(function(){ var search = ['p', 'div', 'span']; $("#highlighter").bind('keyup', function(e){ var pattern = $(this).val(); 

Я не знаю, что это на самом деле означает и как это разместить.

Вот код, который я использую и хочу использовать текстовую букву для подсветки. Теперь в ней ничего нет, поскольку все, что я пытаюсь сделать, похоже, не работает.

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="../CSS/stylesheet.css"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body onload="sortTable()"{amp}gt; {amp}lt;div class="main"{amp}gt; {amp}lt;!-- CONTENT AREA --{amp}gt; {amp}lt;h1{amp}gt;TELEPHONE LIST{amp}lt;/h1{amp}gt; {amp}lt;stickysearch{amp}gt;{amp}lt;input id="myInput" size="100%" type="text" placeholder="Type Search Query here.."{amp}gt;{amp}lt;/stickysearch{amp}gt; {amp}lt;/p{amp}gt; {amp}lt;br{amp}gt; {amp}lt;table{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr bgcolor="YELLOW"{amp}gt; {amp}lt;th{amp}gt;NAME SURNAME{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;COMPANY{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;TEL NR{amp}lt;/th{amp}gt; {amp}lt;TH{amp}gt;DESCRIPTION{amp}lt;/TH{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody id="myTable"{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; Bruce Wayne {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; Wayne Enterprises {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; 084 123 4567 {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Batman {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; Tony Stark {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; company 2 {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; 011 123 4567 {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Iron Man {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; Peter Parker {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; School kid {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; 031 567 1700 {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;Spiderman{amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;td{amp}gt; Wolverine {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; Xmen Incorp {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; 011 437 5000 {amp}lt;/td{amp}gt; {amp}lt;td{amp}gt; MERCEDES BENZ SERVICE CENTER {amp}lt;/td{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;!-- CHANGE THE SEARCH SCRIPT --{amp}gt; {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) {amp}gt; -1) }); }); }); {amp}lt;/script{amp}gt; {amp}lt;!-- CHANGE THE INPUT BOX BG COLOR --{amp}gt; {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; $(document).ready(function(){ $("input").keydown(function(){ $("input").css("background-color", "lawngreen"); }); $("input").keyup(function(){ $("input").css("background-color", "white"); }); }); {amp}lt;/script{amp}gt; {amp}lt;!-- sorting the table alfabetically (begins here) --{amp}gt; {amp}lt;!-- {amp}lt;p{amp}gt;{amp}lt;button onclick="sortTable()"{amp}gt;Sort{amp}lt;/button{amp}gt;{amp}lt;/p{amp}gt; --{amp}gt; {amp}lt;script{amp}gt; function sortTable() { var table, rows, switching, i, x, y, shouldSwitch; table = document.getElementById("myTable"); switching = true; /*Make a loop that will continue until no switching has been done:*/ while (switching) { //start by saying: no switching is done: switching = false; rows = table.rows; /*Loop through all table rows (except the first, which contains table headers):*/ for (i = 1; i {amp}lt; (rows.length - 1); i  ) { //start by saying there should be no switching: shouldSwitch = false; /*Get the two elements you want to compare, one from current row and one from the next:*/ x = rows[i].getElementsByTagName("TD")[0]; y = rows[i   1].getElementsByTagName("TD")[0]; //check if the two rows should switch place: if (x.innerHTML.toLowerCase() {amp}gt; y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch = true; break; } } if (shouldSwitch) { /*If a switch has been marked, make the switch and mark that a switch has been done:*/ rows[i].parentNode.insertBefore(rows[i   1], rows[i]); switching = true; } } } {amp}lt;/script{amp}gt; {amp}lt;!-- sorting the table alfabetically (ends here) --{amp}gt; {amp}lt;!-- CONTENT AREA --{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector