title: How to show matching divs based on input?
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $("#myInput").on("keyup", function () {
          var value = $(this).val().toLowerCase();
          $(".symbolsparent *").filter(function () {
              $(this).toggle($(this).text().toLowerCase().indexOf(value) &gt; -1)
          });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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%);
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main"&gt;
          &lt;div class="container"&gt;
              &lt;div class="findsymbol"&gt;
                  &lt;input id="myInput" type="text" placeholder="Search.."&gt;
              &lt;/div&gt;
              &lt;div class="symbolsparent"&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;★&lt;/div&gt;&lt;span&gt;one star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✦&lt;/div&gt;&lt;span&gt;two star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✡&lt;/div&gt;&lt;span&gt;three star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✪&lt;/div&gt;&lt;span&gt;four star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✩&lt;/div&gt;&lt;span&gt;five star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✧&lt;/div&gt;&lt;span&gt;six star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✮&lt;/div&gt;&lt;span&gt;seven star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✭&lt;/div&gt;&lt;span&gt;eight star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✬&lt;/div&gt;&lt;span&gt;nine star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✫&lt;/div&gt;&lt;span&gt;ten star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✯&lt;/div&gt;&lt;span&gt;eleven star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;⁑&lt;/div&gt;&lt;span&gt;twelve star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;⁂&lt;/div&gt;&lt;span&gt;thirteen star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✰&lt;/div&gt;&lt;span&gt;fourteen star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✴&lt;/div&gt;&lt;span&gt;fifteen star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✳&lt;/div&gt;&lt;span&gt;sixteen star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✲&lt;/div&gt;&lt;span&gt;seventeen star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✱&lt;/div&gt;&lt;span&gt;eighteen star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✥&lt;/div&gt;&lt;span&gt;ninteen star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✤&lt;/div&gt;&lt;span&gt;twenty star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✣&lt;/div&gt;&lt;span&gt;twenty one star&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="symbols"&gt;
                      &lt;div&gt;✢&lt;/div&gt;&lt;span&gt;twenty two star&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am trying with these codes but It's not working.</p>