Jump to content
Santos_2015

busca em data attribute (jquery)[RESOLVIDO]

Recommended Posts

Aalera como faço um busca um valor na propriedade data do Jquery através de um input? tipo mostrar a div de acordo com busca e ocultar as outras.

 

<div data-value="A" class="valor">AA</div>
<div data-value="B" class="valor">BB</div>
<div data-value="C" class="valor">CC</div>

 

Ex: Mostrar as div que contenham A e ocultar as restantes.

Share this post


Link to post
Share on other sites
<div class="campo" data-search="valor1">Valor 01</div>
<div class="campo" data-search="valor2">Valor 02</div>
<div class="campo" data-search="valor3">Valor 03</div>
<input type="text" id="search" value="">
$('#search').on('input', function() {
  var search = $.trim(this.value);
  $('.campo').each(function() {
    if (search.length < 1) {
      $(this).show();
    } else {
      $(this).toggle($(this).filter('[data-search*="' + search + '"]').length > 0);
    }
  });
})

 

Share this post


Link to post
Share on other sites

Eu só faria um pouquinho diferente...

 

$('#search').on('input', function () {
  var search = $.trim(this.value).replace(/"/g, '\\\"');

  if (!search) {
    return $('[data-search]').show();
  }

  $('[data-search]')
    .hide()
    .filter('[data-search^="' + search + '"]')
    .show();
});

A ideia é só deixar mais fácil de entender...

Edited by Michael Granados
adicionei aspas no search e escapei as aspas para não causar possiveis injections...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By marsolim
      fala rapaziada tudo bem? sabe me dizer se tem diferença de performance, de compatibilidade e etc e tal entre o jquery $(this).val() e o javascript puro this.value? tava tentando pesquisar aqui mas não achei nada sobre.
      grato
    • By juliosertori
      Olá boa tarde, tudo bem?
       
      Tenho uma consulta de CEP via AJAX, na qual ele seleciona a cidade no SELECT cidades:
       
      $("#cidade").val(dados.localidade);
       
      O problema é que tem que estar exatamente igual nos 2 lados, na consulta e no select.
       
      Como fazer para não diferenciar minúsculas e maiúsculas, e caracteres especiais?
       
      Obrigado!
    • By juliosertori
      Olá tudo bem?
       
      Tenho campos de produtos que somam os valores e multiplicam pela quantidade, na maioria das vezes o valor sai corretamente em um INPUT com MASK de Moeda, mas alguns valores sai por exemplo dessa forma:
       
      8984.960000000001
       
      O que faz com que não fique corretamente para mandar no POST e tratar os dados depois, na maioria das vezes ele vem correto, por exemplo:
       
      R$ 8,898.10
       
      Não encontrei uma forma dele tratar quando tiver várias casas ele concertar etc.
    • By Carcleo
      Pessoal, bom dia!
       
      Tenho o código abaixo que faz um efeito de parallax e está funcionando normalmente
      CSS
      #top {     background: url("img/1.jpg");     height: 300px; } #mid {     background: url("img/2.jpg");     height: 400px; } #bot {     background: url("img/3.jpg");     height: 500px; } HTML
      <script type="text/javascript" src="jquery.js"></script>   <body>   <div id="top" class="prlx"></div>   <div id="mid" class="prlx"></div>   <div id="bot" class="prlx"></div> </body>  JQUERY
      $('.prlx').each(function() {        var obj = $(this);        obj.css('background-position', 0);     obj.css('background-attachment', 'fixed');        $(window).scroll(function() {     var offset = obj.offset();     var yPos = -($(window).scrollTop() - offset.top) / 10;     var bgpos = '50% ' + yPos + 'px';     obj.css('background-position', bgpos);   });    }); Fui aplicar no meu site 
       
      https://acweb.net.br/
       
      e o efeito parallax não funcionou embora no inspector dá para ver os cálculos sendo feitos e adicionado às sections
       
      Alguém me ajuda a descobrir onde errei?
       
      Já estou faz um tempão e não acho!
       
      As sections afetadas são as que começam com os textos
       
      Fazemos todo o trabalho por você e contato, 
    • By juliosertori
      Olá galera tudo bem?
       
      Tenho um While em Javascript, e preciso dentro dele um JSON, ex:
       
      while ( qtdProd <= qtdProdutos ) { { "cod_barras": "SEM GTIN", "codigo_produto": 1, "nome_produto": "Coca-cola lata 350 ml", "ncm": "44071100", "unidade": "UN", "quantidade": 1.00, "valor_unitario": 3.5, "compoe_valor_total": 1 } qtdProd++; } Logicamente assim não funciona, mas não encontrei como inserir corretamente
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.