How to filter html text and display div as found text

Question

How to filter html text and display div as found text

Navigation

#1 by (1 votes)

2

Save list!

I need some help here I have the following tags in the 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>

So far, I have been able to mark the searched text with the following jquery code, already funfando 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 motor finds the text typed in any div that will be inumeras, the code hides all other divs where the text does not exist and shows all that exists, which may be one or more. Example:

Type "text" into the input, you should hide the divs "div02" and "div ... N" and show div "div01"

type "input" in the input, you should hide the "div ... N" and show the divs "div01" and "div02"

Type "characters" in the input, you should hide the divs "div01" and "div02" and show the "div ... N" containing the searched text

Is it possible to do this with jquery? If anyone could help me with this?

Thank you!

Light and peace!

html jquery

asked by anonymous 06.08.2016 / 00:38

1 answer

Install C # application with SQL Server database Difference between List and and Return in Entity

score 1 · Answer 1

What can be done with .hide() and .show() , combined with the selection of div where p is with .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><inputtype="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 should be noted that .parent() only works in this case of the iv that wants to show / hide is the first element in a hierarchical level above the paragraph. Otherwise you should use .closest() and select a general class for all div .