JSFiddle - React, Tailwind, and code Playground

by Marcel P S

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Filtro</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h3>Filtro</h3>

		<form>
			<input id="search_json" type="text" name="" placeholder="Pesquisar.."><br>
      <ul id="lista-opcoes"></ul>
		</form>

    <div class="zerar-espaco"></div>

    <p>testando texto</p>
	</body>
</html>

CSS

* {
  box-sizing: border-box;
}

      #search_json {
        float: right;
        background-image: url('iconfinder_icon-111-search_314478.png');
        background-position: 10px 12px;
        background-repeat: no-repeat;
        width: 150px;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 1px solid #ddd;
        margin-bottom: 12px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
      }

      #search_json:focus {
        width: 100%;
      }

      .zerar-espaco {
        clear: both;
      }

      #lista-opcoes {
        list-style-type: none;
        padding: 0;
        /*margin: 0;*/
        position: absolute;
        margin-top: 27px;
        margin-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        width:100%;
      }

      #lista-opcoes li a {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        display: block;
      }

      #lista-opcoes li a:hover:not(.header) {
        background-color: #eee;
        cursor: pointer;
      }

JavaScript

var jsonData = {
        "squadName": "Super hero squad",
        "homeTown": "Metro City",
        "formed": 2016,
        "secretBase": "Super tower",
        "active": true,
        "members": [
          {
            "id": 1,
            "name": "Molecule Man",
            "age": 29,
            "secretIdentity": "Dan Jukes",
            "powers": [
              "Radiation resistance",
              "Turning tiny",
              "Radiation blast"
            ]
          },
          {
            "id": 2,
            "name": "Madame Uppercut",
            "age": 39,
            "secretIdentity": "Jane Wilson",
            "powers": [
              "Million tonne punch",
              "Damage resistance",
              "Superhuman reflexes"
            ]
          },
          {
            "id": 3,
            "name": "Eternal Flame",
            "age": 1000000,
            "secretIdentity": "Unknown",
            "powers": [
              "Immortality",
              "Heat Immunity",
              "Inferno",
              "Teleportation",
              "Interdimensional travel"
            ]
          }
        ]
      }


      montaComponente(jsonData['members']);


			document.querySelector("#search_json").addEventListener('blur', function() {
         
        let opcoesLi = document.querySelectorAll('.opcao');

        esconderOpcoes(opcoesLi);
      });


			document.querySelector("#search_json").addEventListener('keyup', function() {
			   
         let texto_filtro = document.getElementById("search_json").value.toLowerCase();
         let lista_elem = [...document.querySelectorAll('.opcao')];
         let opcoesLi = document.querySelectorAll('.opcao');

         let filtrado = (filt) => {

            if(filt.innerText.toLowerCase().includes(texto_filtro) === true){
              document.getElementById(filt['id']).style.display = "block";
            }else {
              document.getElementById(filt['id']).style.display = "none";
            }

 ...