Show div containing search content

Question

I created a search button and some search options within the Divs .opcao. How do I make it so that only the divs where the contents of the button contain the words typed in the search field?

For example, if I type 'register' only the Divs with the contents of the buttons should appear cadastrar novo cliente, cadastrar novo funcionário and cadastrar novo produto.

<input type="search" name="q" class="search-text" placeholder="Procurar..." autocomplete="off" id="textFind">
<div class="pesquisas">
    <div class="opcao">
        <a>Agenda</a>
    </div>
    <div class="opcao">
        <a>Lista de clientes</a>
    </div>
    <div class="opcao">
        <a>Cadastrar novo cliente</a>
    </div>
    <div class="opcao">
        <a>Lista de fornecedores</a>
    </div>
    <div class="opcao">
        <a>Cadastrar novo fornecedor</a>
    </div>
    <div class="opcao">
        <a>Lista de produtos</a>
    </div>
    <div class="opcao">
        <a>Cadastrar novo produto</a>
    </div>
 </div>

Answer 1

You can use the selector :contains. It will fetch only the elements that have the text typed in the input. Like :contains is case sensitive (case difference), you can change the behavior of the selector via code:

$(function(){
   $.expr[":"].contains = $.expr.createPseudo(function(a){
      return function(e){
         return ~$(e).text().toUpperCase().indexOf(a.toUpperCase());
      }
   });
   $("[name=q]").on("input", function(){
      $(".opcao").hide();
      $(".opcao:contains('"+ this.value +"')").show();
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" name="q" class="search-text" placeholder="Procurar..." autocomplete="off" id="textFind">
<div class="pesquisas">
    <div class="opcao">
        <a>Agenda</a>
    </div>
    <div class="opcao">
        <a>Lista de clientes</a>
    </div>
    <div class="opcao">
        <a>Cadastrar novo cliente</a>
    </div>
    <div class="opcao">
        <a>Lista de fornecedores</a>
    </div>
    <div class="opcao">
        <a>Cadastrar novo fornecedor</a>
    </div>
    <div class="opcao">
        <a>Lista de produtos</a>
    </div>
    <div class="opcao">
        <a>Cadastrar novo produto</a>
        <x></x>
    </div>
</div>

Answer 2

Here is an example with Jquery:

$('.contact-name').hide();
$('#search').click(function(){
    $('.contact-name').hide();
    var txt = $('#search-criteria').val();
    $('.contact-name').each(function(){
       if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
           $(this).show();
       }
    });
});

<input type="text" id="search-criteria"/>
<input type="button" id="search" value="search"/>
<div class="contact-name"><h3><a href="##">Charles Smith</a></h3></div>
<div class="contact-name"><h3><a href="##">raj kumar</a></h3></div>
<div class="contact-name"><h3><a href="##">Charles Smith</a></h3></div>