1

Eu criei um botão de pesquisa e algumas opções de pesquisa dentro das divs .opcao. Como eu faço para que apareçam apenas as divs em que o conteúdo do botão contenha as palavras digitadas no campo de busca?

Por exemplo, se eu digitar 'cadastrar' devem aparecer apenas as divs com os conteúdos dos botões cadastrar novo cliente, cadastrar novo funcionário e 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>

2 Respostas 2

2

Pode usar o seletor :contains. Ele vai buscar apenas os elementos que tiverem o texto digitado no input. Como o :contains é case sensitive (diferencia maiúsculo de minúsculo), você pode alterar o comportamento do seletor via código:

$(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>

1

Aqui tem um exemplo com 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .