Home > Blockchain >  How to show matching divs based on input?
How to show matching divs based on input?

Time：10-03

I am creating an emoji symbols website. Where I have an input box, when a user inputs the name of symbols, then I want to show only all matching symbols or filter all matching divs by input. and hide all other divs, which are not matching by input. I used the below code to achieve this but it did not work.

 $("#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>

I am trying with these codes but It's not working.

CodePudding user response：

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>

Snippet 2 (In 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>

Page link：https//www.codepudding.com/Blockchain/137124.html

Prev:How to set width and height to content image in css
Next:html/css flex: How to prevent item in container exceed parent container height?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding