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

Navigation
1

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

Q: I am referring to this page: link

Here is 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><inputid='myInput'placeholder='Pesquisartexto...'title='Digitealgo...'type='text'><inputid='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>

Thank you in advance! =]

    
asked by anonymous 17.03.2018 / 02:33

1 answer

1

The code for the reset button was missing, which 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 of reset it is no longer necessary to have the onclick attribute on the label, and can only be: 

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

See the full example working: 

$(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><inputid='myInput'placeholder='Pesquisartexto...'title='Digitealgo...'type='text'><inputid='rst'value='&#215;'type='reset'></form><divid='body-post'><ul><li><ahref="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>
    
17.03.2018 / 02:50
Chronometer display value greater than 60 minutes in MM: SS format Slider with 3 automatic columns without javascript