How to clear search results in a list after clicking a button?

Question

I have a list of items and a search field that filters this list as something is typed in this same box. I also have a button for reset that cleans the search box and focuses on it, but does not clean the filtered results based on what was typed.

P.S.: I refer to this page: http://einconformado.blogspot.com.br/p/textos.html

Follow the code I’m using:

$(function() {
    $("#myInput").keyup(function() {
      $("#body-post p").css("display", "none");
      var texto = $(this).val().toUpperCase();
      $("#body-post li").css("display", "block");
      $("#body-post li").each(function() {
        if ($(this).text().toUpperCase().indexOf(texto) < 0)
          $(this).css("display", "none");
      });
    });
  });

#myInput {
  background: url('http://w3schools.com/css/searchicon.png') 10px 6px no-repeat #fff;
  width: 50%;
  font-size: 13px;
  font-family: Open Sans;
  color: #000;
  padding: 8px 40px;
  border: 1px solid #bbb;
  transition: all 0.3s;
  margin: 6px 0;
  margin-left: 6px
}

#myInput:hover,
#myInput:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08)
}

#myInput:focus {
  border: 1px solid #D80000
}

#rst {
  height: 36px;
  color: #2d2d2d;
  border: none;
  background: transparent;
}

#rst:hover {
  color: #D80000
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id='myInput' placeholder='Pesquisar texto...' title='Digite algo...' type='text'>
  <input id='rst' value='&#215;' type='reset' onclick="document.getElementById('myInput').focus();">
</form>

<div id='body-post'>
  <ul>
    <li><a href="http://einconformado.blogspot.com/2018/03/tristeza-e-revolta.html">207 Quando a tristeza e a revolta resolvem marcar um encontro dentro de mim</a></li>
    <li><a href="http://einconformado.blogspot.com/2018/03/sete-ensinamentos-de-numeros-11.html">206 Sete Ensinamentos de Números 11</a></li>
    <li><a href="http://einconformado.blogspot.com/2018/03/tenha-e-mantenha.html">205 Tenha e Mantenha</a></li>
  </ul>
</div>

From now on, thank you! =]

Answer 1

Failed to implement the code for the reset button that puts the results all over again:

$("#rst").on("click", function(){
  $("#body-post li").css("display", "block"); //mostrar tudo
  $("#myInput").focus(); //colocar o focus na caixa de texto
});

With this implementation for the click event reset no longer requires the attribute onclick on the label, which may be:

<input id='rst' value='&#215;' type='reset'>

See how it works in the full example:

$(function() {
    $("#myInput").keyup(function() {
      $("#body-post p").css("display", "none");
      var texto = $(this).val().toUpperCase();
      $("#body-post li").css("display", "block");
      $("#body-post li").each(function() {
        if ($(this).text().toUpperCase().indexOf(texto) < 0)
          $(this).css("display", "none");
      });
    });

    $("#rst").on("click", function(){
      $("#body-post li").css("display", "block");
      $("#myInput").focus();
    });
  });

#myInput {
  background: url('http://w3schools.com/css/searchicon.png') 10px 6px no-repeat #fff;
  width: 50%;
  font-size: 13px;
  font-family: Open Sans;
  color: #000;
  padding: 8px 40px;
  border: 1px solid #bbb;
  transition: all 0.3s;
  margin: 6px 0;
  margin-left: 6px
}

#myInput:hover,
#myInput:focus {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08)
}

#myInput:focus {
  border: 1px solid #D80000
}

#rst {
  height: 36px;
  color: #2d2d2d;
  border: none;
  background: transparent;
}

#rst:hover {
  color: #D80000
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id='myInput' placeholder='Pesquisar texto...' title='Digite algo...' type='text'>
  <input id='rst' value='&#215;' type='reset'>
</form>

<div id='body-post'>
  <ul>
    <li><a href="http://einconformado.blogspot.com/2018/03/tristeza-e-revolta.html">207 Quando a tristeza e a revolta resolvem marcar um encontro dentro de mim</a></li>
    <li><a href="http://einconformado.blogspot.com/2018/03/sete-ensinamentos-de-numeros-11.html">206 Sete Ensinamentos de Números 11</a></li>
    <li><a href="http://einconformado.blogspot.com/2018/03/tenha-e-mantenha.html">205 Tenha e Mantenha</a></li>
  </ul>
</div>