Стиль для отфильтрованного элемента
ПРИВЕТ!
Кто-нибудь подскажите, как задать стиль для отфильтрованного элемента(filter в скрипте). Через filter.style.color="red" получаю ошибку. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body{ width:1920px; height:1024px; background-color:#fffdfe; font-family: Brandon Grotesque; letter-spacing: 0.3px; } #search_bar { height: 40px; width: 652px; width: 652px; border: 1px solid #D6D6D6; position: absolute; top:48px; bottom: 0%; margin-left: 349px; margin-right: 349px; cursor: pointer; font-size: 13px; padding-left: 9px; } #row2 { list-style-type: none; padding: 0; margin: 0; display: grid; width: 652px; } #row2 li a { border: 1px solid #ddd; background-color: #f6f6f6; text-decoration: none; font-size: 18px; color: blue; display: inline-block; border-right: none; border-left: none; padding-top: 25px; padding-bottom: 25px; } #row2 li a:hover{ background-color: #eee; color: red; } #icon1::after { content: "\2B07"; float: right; font-size: 23px; background-color:aqua; display: inline-block; } #icon1:hover::after { content: "\2B06"; } #top2,#top{ margin-left: 349px; margin-right: 349px; background: aliceblue; width: 652px; margin-top: 155px; } #top2{ margin-top: 55px; } #top3{ align-items: center; width: 637px; display: inline-block; background: #406e97;; display: inline-block; } .column{ color:background: #323232; cursor: pointer; display: inline-block; padding-right: 12px; } .column:hover{ color:#EF5E3A; } a{text-decoration:none; } a:hover{ color:red; } .color{ color:aqua; } </style> </head> <body> <input type="text" name="example" id="search_bar" onkeyup="myFunction()" value="🔍 Search FAQ" onfocus="value=''"> <div id="all_top"> <div id="top"></div> <div id="top2"></div> </div> <script> var arr2=[ {name:'HELLO'}, {name:'GOOD DAY'}, {name:'MORNING'}, ] var text='<ul id="row2">'; for(var i=0; i<arr2.length; i++){ text+='<li ><a href="#"><div id="top3">'+arr2[i].name+'</div></a></li>'; } text+='</ul>'; document.getElementById('top2').innerHTML= text; function myFunction() { var input, filter, ul, li, a, i, txtValue,b; input = document.getElementById("search_bar"); filter = input.value.toUpperCase(); //filter.style.color="red"; console.log(filter+'-it filter'); ul = document.getElementById("all_top"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> </body> </html> |
rita,
сделайте нормальный макет или ждите телепатов. на всякий случай один id это для одного элемента, если много одинаковых элементов тогда используют class!!! |
Такой подойдет?
|
rita,
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { width: 1920px; height: 1024px; background-color: #fffdfe; font-family: Brandon Grotesque; letter-spacing: .3px; } #search_bar { height: 40px; width: 652px; width: 652px; border: 1px solid #d6d6d6; position: absolute; top: 48px; bottom: 0; margin-left: 349px; margin-right: 349px; cursor: pointer; font-size: 13px; padding-left: 9px; } #row2 { list-style-type: none; padding: 0; margin: 0; display: grid; width: 652px; } #row2 li a { border: 1px solid #ddd; background-color: #f6f6f6; text-decoration: none; font-size: 18px; color: blue; display: inline-block; border-right: none; border-left: none; padding-top: 25px; padding-bottom: 25px; } #row2 li a:hover { background-color: #eee; color: red; } #icon1::after { content: '\2B07'; float: right; font-size: 23px; background-color: aqua; display: inline-block; } #icon1:hover::after { content: '\2B06'; } #top2, #top { margin-left: 349px; margin-right: 349px; background: aliceblue; width: 652px; margin-top: 155px; } #top2 { margin-top: 55px; } .top3 { align-items: center; width: 637px; display: inline-block; background: #406e97;; display: inline-block; } .column { color: background: #323232; cursor: pointer; display: inline-block; padding-right: 12px; } .column:hover { color: #ef5e3a; } a { text-decoration: none; } a:hover { color: red; } .color { color: aqua; } li.red .top3{ color: red; } </style> </head> <body> <input type="text" name="example" id="search_bar" oninput="myFunction()" value="🔍 Search FAQ" onfocus="value=''"> <div id="all_top"> <div id="top"></div> <div id="top2"></div> </div> <script> let arr2 = [{ name: 'HELLO' }, { name: 'GOOD DAY' }, { name: 'MORNING' }, ] let text = '<ul id="row2">'; for (let { name } of arr2) { text += `<li><a href='#'><div class='top3'>${name}`; } document.getElementById('top2').innerHTML = text; let input = document.getElementById("search_bar"), lis = document.querySelectorAll('#row2 > li'); function myFunction() { let txtValue = input.value.trim().toUpperCase(); lis.forEach(function(li) { let textContent = li.textContent; let toggle = txtValue && textContent.toUpperCase().indexOf(txtValue) > -1; li.classList.toggle('red', toggle) }) } </script> </body> </html> |
Нужно чтобы цветом выделялись только набранные буквы в инпуте и в массиве ,соответственно, а не все слово.
|
Цитата:
|
Спасибо, но я думаю и так подойдет.
|
поиск и подсветка совпадений
Цитата:
:lol: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { width: 1920px; height: 1024px; background-color: #fffdfe; font-family: Brandon Grotesque; letter-spacing: .3px; } #search_bar { height: 40px; width: 652px; width: 652px; border: 1px solid #d6d6d6; position: absolute; top: 48px; bottom: 0; margin-left: 349px; margin-right: 349px; cursor: pointer; font-size: 13px; padding-left: 9px; } #row2 { list-style-type: none; padding: 0; margin: 0; display: grid; width: 652px; } #row2 li a { border: 1px solid #ddd; background-color: #f6f6f6; text-decoration: none; font-size: 18px; color: blue; display: inline-block; border-right: none; border-left: none; padding-top: 25px; padding-bottom: 25px; } #row2 li a:hover { background-color: #eee; color: red; } #icon1::after { content: '\2B07'; float: right; font-size: 23px; background-color: aqua; display: inline-block; } #icon1:hover::after { content: '\2B06'; } #top2, #top { margin-left: 349px; margin-right: 349px; background: aliceblue; width: 652px; margin-top: 155px; } #top2 { margin-top: 55px; } .top3 { align-items: center; width: 637px; display: inline-block; background: #406e97; ; display: inline-block; } .column { color: background: #323232; cursor: pointer; display: inline-block; padding-right: 12px; } .column:hover { color: #ef5e3a; } a { text-decoration: none; } a:hover, a:hover mark { color: red; } .color { color: aqua; } mark { color: #000000; } </style> </head> <body> <input type="text" name="example" id="search_bar" value="???? Search FAQ" onfocus="value=''"> <div id="all_top"> <div id="top"></div> <div id="top2"></div> </div> <script> let arr2 = [{ name: 'HELLO' }, { name: 'GOOD DAY' }, { name: 'MORNING' }, ] let text = '<ul id="row2">'; for (let { name } of arr2) { text += `<li><a href='#'><div class='top3' data-name='${name}'>${name}`; } document.getElementById('top2').innerHTML = text; let search = document.getElementById("search_bar"), divs = document.querySelectorAll('#row2 .top3'); RegExp.escape = s => s.replace(/[[\\^$.|?*+()]/gim, "\\$&"); function mark(string) { const node = document.createElement("mark"); node.textContent = string; return node; } search.addEventListener('input', function() { const parts = search.value.trim().split(/\s+/); const pattern = new RegExp(parts.map(RegExp.escape).join("|"), "gi"); divs.forEach(function(div) { let match, index = 0, value = div.dataset.name; pattern.lastIndex = 0; div.textContent = ""; if (parts[0].length > 0) while (match = pattern.exec(value)) div.append( value.slice(index, index = match.index), mark(value.slice(index, index = pattern.lastIndex)) ); div.append(value.slice(index)); }) }) </script> </body> </html> |
Часовой пояс GMT +3, время: 06:48. |