|
Сообщение от 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,
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>