如何根据输入显示匹配div ?

Question

我正在创建一个表情符号网站。在我有一个输入框的地方，当用户输入符号的名称时，我想只显示所有匹配的符号或通过输入过滤所有匹配的符号。并隐藏所有其他不匹配输入的div。我用下面的代码来实现这一目标,但并不奏效。

$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$(".symbolsparent *").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});

html,
body,
div,
span {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
*,
input::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
fieldset {
border-width: 0;
padding: 0;
margin: 0;
}
html {
font-size: 1px;
/*for using REM units*/
line-height: 1.2;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
body {
background: #f5f6fa;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
font-size: 16rem;
font-weight: 400;
line-height: 1.3;
color: #222;
}
.container {
max-width: 1040px;
margin: 0 auto
}
/* main */
#main {
width: 100%;
float: left;
margin-top: 50px;
}
.symbolsparent {
text-align: center;
float: left;
width: 100%;
}
.symbols {
display: inline-block;
margin: 3px;
font-size: 25px;
cursor: pointer;
background: #fff;
color: #3173b7;
border: 2px solid #eee;
border-radius: 3px;
position: relative;
}
.symbolsparent h2 {
border-bottom: 1px solid #e8e8e8;
padding: 5px 0;
margin: 5px 0;
font-family: arial, sans-serif;
clear: both;
font-size: 25px;
}
.symbols div {
padding: 8px 13px;
font-family: arial, sans-serif;
}
.symbols:hover {
color: #0d53c7;
border: 2px solid #0d53c7;
}
.symbols span {
position: absolute;
background: #3173b7;
border-radius: 3px;
font-size: 10px;
width: max-content;
z-index: 999;
padding: 1px 5px;
color: #fff;
left: 0;
top: -16px;
text-transform: uppercase;
display: none;
transition: all .2s ease-in-out;
}
.symbols:hover span {
display: block;
}
.symbols button {
position: absolute;
bottom: 0;
left: 0;
background: #0d53c7;
color: #fff;
padding: 3px;
font-size: 11px;
text-transform: uppercase;
width: 100%;
box-shadow: 0px -3px 5px 0px rgb(0 0 0 / 25%);
}

<div id="main">
<div class="container">
<div class="findsymbol">
<input id="myInput" type="text" placeholder="Search..">
</div>
<div class="symbolsparent">
<div class="symbols">
<div>★</div><span>one star</span>
</div>
<div class="symbols">
<div>✦</div><span>two star</span>
</div>
<div class="symbols">
<div>✡</div><span>three star</span>
</div>
<div class="symbols">
<div>✪</div><span>four star</span>
</div>
<div class="symbols">
<div>✩</div><span>five star</span>
</div>
<div class="symbols">
<div>✧</div><span>six star</span>
</div>
<div class="symbols">
<div>✮</div><span>seven star</span>
</div>
<div class="symbols">
<div>✭</div><span>eight star</span>
</div>
<div class="symbols">
<div>✬</div><span>nine star</span>
</div>
<div class="symbols">
<div>✫</div><span>ten star</span>
</div>
<div class="symbols">
<div>✯</div><span>eleven star</span>
</div>
<div class="symbols">
<div>⁑</div><span>twelve star</span>
</div>
<div class="symbols">
<div>⁂</div><span>thirteen star</span>
</div>
<div class="symbols">
<div>✰</div><span>fourteen star</span>
</div>
<div class="symbols">
<div>✴</div><span>fifteen star</span>
</div>
<div class="symbols">
<div>✳</div><span>sixteen star</span>
</div>
<div class="symbols">
<div>✲</div><span>seventeen star</span>
</div>
<div class="symbols">
<div>✱</div><span>eighteen star</span>
</div>
<div class="symbols">
<div>✥</div><span>ninteen star</span>
</div>
<div class="symbols">
<div>✤</div><span>twenty star</span>
</div>
<div class="symbols">
<div>✣</div><span>twenty one star</span>
</div>
<div class="symbols">
<div>✢</div><span>twenty two star</span>
</div>
</div>
</div>
</div>

我正在尝试这些代码，但它不工作。

Answer 1

Try This Way (In jQuery)

$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
var divs = $(".symbolsparent .symbols");
divs.hide();

divs.each(function(){
var text = $(this).find("span").text().toLowerCase();
if(text.includes(value)){
$(this).show();
}
});

});

html,
body,
div,
span {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
*,
input::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
fieldset {
border-width: 0;
padding: 0;
margin: 0;
}
html {
font-size: 1px;
/*for using REM units*/
line-height: 1.2;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
body {
background: #f5f6fa;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
font-size: 16rem;
font-weight: 400;
line-height: 1.3;
color: #222;
}
.container {
max-width: 1040px;
margin: 0 auto
}
/* main */
#main {
width: 100%;
float: left;
margin-top: 50px;
}
.symbolsparent {
text-align: center;
float: left;
width: 100%;
}
.symbols {
display: inline-block;
margin: 3px;
font-size: 25px;
cursor: pointer;
background: #fff;
color: #3173b7;
border: 2px solid #eee;
border-radius: 3px;
position: relative;
}
.symbolsparent h2 {
border-bottom: 1px solid #e8e8e8;
padding: 5px 0;
margin: 5px 0;
font-family: arial, sans-serif;
clear: both;
font-size: 25px;
}
.symbols div {
padding: 8px 13px;
font-family: arial, sans-serif;
}
.symbols:hover {
color: #0d53c7;
border: 2px solid #0d53c7;
}
.symbols span {
position: absolute;
background: #3173b7;
border-radius: 3px;
font-size: 10px;
width: max-content;
z-index: 999;
padding: 1px 5px;
color: #fff;
left: 0;
top: -16px;
text-transform: uppercase;
display: none;
transition: all .2s ease-in-out;
}
.symbols:hover span {
display: block;
}
.symbols button {
position: absolute;
bottom: 0;
left: 0;
background: #0d53c7;
color: #fff;
padding: 3px;
font-size: 11px;
text-transform: uppercase;
width: 100%;
box-shadow: 0px -3px 5px 0px rgb(0 0 0 / 25%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div class="container">
<div class="findsymbol">
<input id="myInput" type="text" placeholder="Search..">
</div>
<div class="symbolsparent">
<div class="symbols">
<div>★</div><span>one star</span>
</div>
<div class="symbols">
<div>✦</div><span>two star</span>
</div>
<div class="symbols">
<div>✡</div><span>three star</span>
</div>
<div class="symbols">
<div>✪</div><span>four star</span>
</div>
<div class="symbols">
<div>✩</div><span>five star</span>
</div>
<div class="symbols">
<div>✧</div><span>six star</span>
</div>
<div class="symbols">
<div>✮</div><span>seven star</span>
</div>
<div class="symbols">
<div>✭</div><span>eight star</span>
</div>
<div class="symbols">
<div>✬</div><span>nine star</span>
</div>
<div class="symbols">
<div>✫</div><span>ten star</span>
</div>
<div class="symbols">
<div>✯</div><span>eleven star</span>
</div>
<div class="symbols">
<div>⁑</div><span>twelve star</span>
</div>
<div class="symbols">
<div>⁂</div><span>thirteen star</span>
</div>
<div class="symbols">
<div>✰</div><span>fourteen star</span>
</div>
<div class="symbols">
<div>✴</div><span>fifteen star</span>
</div>
<div class="symbols">
<div>✳</div><span>sixteen star</span>
</div>
<div class="symbols">
<div>✲</div><span>seventeen star</span>
</div>
<div class="symbols">
<div>✱</div><span>eighteen star</span>
</div>
<div class="symbols">
<div>✥</div><span>ninteen star</span>
</div>
<div class="symbols">
<div>✤</div><span>twenty star</span>
</div>
<div class="symbols">
<div>✣</div><span>twenty one star</span>
</div>
<div class="symbols">
<div>✢</div><span>twenty two star</span>
</div>
</div>
</div>
</div>

代码片段2(在Vanila JS中)

document.getElementById("myInput").onkeyup = keyup;
function keyup(){
var value = this.value.toLowerCase();
var divs = document.querySelectorAll(".symbolsparent .symbols");

for(var x = 0; x < divs.length; x++){
divs[x].style.display = "none";
var txt = divs[x].querySelector("span").innerText.toLowerCase();


if(txt.includes(value))
divs[x].style.display = "inline-block";
}


}

html,
body,
div,
span {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
*,
input::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
fieldset {
border-width: 0;
padding: 0;
margin: 0;
}
html {
font-size: 1px;
/*for using REM units*/
line-height: 1.2;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
body {
background: #f5f6fa;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
font-size: 16rem;
font-weight: 400;
line-height: 1.3;
color: #222;
}
.container {
max-width: 1040px;
margin: 0 auto
}
/* main */
#main {
width: 100%;
float: left;
margin-top: 50px;
}
.symbolsparent {
text-align: center;
float: left;
width: 100%;
}
.symbols {
display: inline-block;
margin: 3px;
font-size: 25px;
cursor: pointer;
background: #fff;
color: #3173b7;
border: 2px solid #eee;
border-radius: 3px;
position: relative;
}
.symbolsparent h2 {
border-bottom: 1px solid #e8e8e8;
padding: 5px 0;
margin: 5px 0;
font-family: arial, sans-serif;
clear: both;
font-size: 25px;
}
.symbols div {
padding: 8px 13px;
font-family: arial, sans-serif;
}
.symbols:hover {
color: #0d53c7;
border: 2px solid #0d53c7;
}
.symbols span {
position: absolute;
background: #3173b7;
border-radius: 3px;
font-size: 10px;
width: max-content;
z-index: 999;
padding: 1px 5px;
color: #fff;
left: 0;
top: -16px;
text-transform: uppercase;
display: none;
transition: all .2s ease-in-out;
}
.symbols:hover span {
display: block;
}
.symbols button {
position: absolute;
bottom: 0;
left: 0;
background: #0d53c7;
color: #fff;
padding: 3px;
font-size: 11px;
text-transform: uppercase;
width: 100%;
box-shadow: 0px -3px 5px 0px rgb(0 0 0 / 25%);
}

<div id="main">
<div class="container">
<div class="findsymbol">
<input id="myInput" type="text" placeholder="Search..">
</div>
<div class="symbolsparent">
<div class="symbols">
<div>★</div><span>one star</span>
</div>
<div class="symbols">
<div>✦</div><span>two star</span>
</div>
<div class="symbols">
<div>✡</div><span>three star</span>
</div>
<div class="symbols">
<div>✪</div><span>four star</span>
</div>
<div class="symbols">
<div>✩</div><span>five star</span>
</div>
<div class="symbols">
<div>✧</div><span>six star</span>
</div>
<div class="symbols">
<div>✮</div><span>seven star</span>
</div>
<div class="symbols">
<div>✭</div><span>eight star</span>
</div>
<div class="symbols">
<div>✬</div><span>nine star</span>
</div>
<div class="symbols">
<div>✫</div><span>ten star</span>
</div>
<div class="symbols">
<div>✯</div><span>eleven star</span>
</div>
<div class="symbols">
<div>⁑</div><span>twelve star</span>
</div>
<div class="symbols">
<div>⁂</div><span>thirteen star</span>
</div>
<div class="symbols">
<div>✰</div><span>fourteen star</span>
</div>
<div class="symbols">
<div>✴</div><span>fifteen star</span>
</div>
<div class="symbols">
<div>✳</div><span>sixteen star</span>
</div>
<div class="symbols">
<div>✲</div><span>seventeen star</span>
</div>
<div class="symbols">
<div>✱</div><span>eighteen star</span>
</div>
<div class="symbols">
<div>✥</div><span>ninteen star</span>
</div>
<div class="symbols">
<div>✤</div><span>twenty star</span>
</div>
<div class="symbols">
<div>✣</div><span>twenty one star</span>
</div>
<div class="symbols">
<div>✢</div><span>twenty two star</span>
</div>
</div>
</div>
</div>