How to filter html text and display div according to the found text

Asked

Viewed 1,620 times

2

Save list!

I need a little help here I have the following tags in html:

<html>
<body>
<div id="div01" style="display: none">
    <p> esse texto está aqui para ser pesquisado.</p>
    <p> esse outro texto também vai ser pesquisado.</p>
    <p> texto que vai ser que o usuario vai pesquisar digitando no input.</p>
</div>
    <div id="div02" style="display: none">
    <p> esse paragrafo deve aparecer se o texto didigtado estiver nessa div.</p>
    <p> esse outro parágrafo vai obedece ao mesmo cirterio.</p>
    <p> o usuario vai digitar no input e essa div deve aparecer.</p>
</div>
        <div id="div...N" style="display: none">
    <p> aqui só tem palavras e frases.</p>
    <p> nesse os caracteres estão separados por espaço.</p>
    <p> escrever no campo deve mostrar esse bloco.</p>
</div>
<!-- ... -->
</body>
</html>

hitherto, I have been able to mark the searched text with the following jquery code, it is already running blz:

    <script>
      $(document).ready(function()
      {
        $("#textFind").keyup(function()
        {
          stringPesquisa = $("#textFind").val();
          $('P').css("background","");
          $('P:contains('+stringPesquisa+')').css("background","#FFFF00");
        });
      });
      function teste()
      {
        var a = document.getElementById('textFind').value();
        alert(a);
      }
    </script>

What I need is: when the user enters a text in the input and engine find the text typed in a div whatever will be numberless, the code hides all other Ivs where the text does not exist and shows all that exists, which can be one or several. Example:

type "text" in the input, you must hide the "div02" and "div... N" Ivs and show the div "div01"

type "input" into the input, you must hide "div... N" and show the "div01" and "div02"

type "characters" in the input, you must hide the "div01" and "div02" Ivivs and show the "div... N" containing the searched text

Is it possible to do this with jquery? if it’s anyone could help me?

Thanks!

Light and peace!

jquery html

1 answer

1

What you want can be done with .hide() and .show(), allied with the selection of div in which the p is with the .parent():

  $("#textFind").keyup(function(){
    var stringPesquisa = $(this).val();
    $('p').parent().hide();
    $('p:contains('+stringPesquisa+')').parent().show()
  });
div{
  margin: 10px;
  border: 1px solid #333;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textFind">
<br>
<div id="div01" style="">
  <p> esse texto está aqui para ser pesquisado.</p>
  <p> esse outro texto também vai ser pesquisado.</p>
  <p> texto que vai ser que o usuario vai pesquisar digitando no input.</p>
</div>
<div id="div02" style="">
  <p> esse paragrafo deve aparecer se o texto didigtado estiver nessa div.</p>
  <p> esse outro parágrafo vai obedece ao mesmo cirterio.</p>
  <p> o usuario vai digitar no input e essa div deve aparecer.</p>
</div>
<div id="div03" style="">
  <p> esse paragrafo deve aparecer se o texto didigtado estiver nessa div.</p>
  <p> esse outro parágrafo vai obedece ao mesmo cirterio.</p>
  <p> o usuario vai digitar no input e essa div deve aparecer.</p>
</div>
<div id="div04" style="">
  <p> esse paragrafo deve aparecer se o texto didigtado estiver nessa div.</p>
  <p> esse outro parágrafo vai obedece ao mesmo cirterio.</p>
  <p> o usuario vai digitar no input e essa div deve aparecer.</p>
</div>

It is noteworthy that the .parent() only Funion in this case that the iv that wants to show/hide is the first element on a hierarchical level above the paragraph. Otherwise it should use .closest() and select a general class for all div.

  • valeu mano @Samir Braga! goes well in the direction of what I was looking for, of course it’s just the example, but helped pakas.

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.