Create a filter using Jquery

Asked

Viewed 238 times

1

I’m making a filter in jquery but I’m getting my logic wrong somewhere and I’m not getting out of place. My filter is not disappearing with some words I type, it brings me the whole block, even though the word typed is not in the item. I’m having trouble solving.

This is the portal : http://www.enap.gov.br/web/pt-br/perguntas-frequentes

This is my script (just play on the console of the page to test) 

$("input[name='_3_keywords']").keyup(function() {

    var palavrasChave = $("input[name='_3_keywords']").val();
    if (palavrasChave.trim() !== "") {
        var content = document.querySelectorAll('.asset-full-content.show-asset-title');
        content.forEach((element) => {
            element.style.display = 'none';
        });
        $(".taglib-header").hide();
        var $elements = $(".taglib-header:contains(" + palavrasChave + ")");
        $elements.each((index) => {
            $elements[index].nextElementSibling.style.display = 'block';
        });
        $elements.show();

        var $elementsContent = $(".asset-full-content:contains(" + palavrasChave + ")");
        $elementsContent.each((index) => {
            $($elementsContent[index]).show();
            console.log($($elementsContent[index]).prev());
            $($elementsContent[index]).prev().show(); $elementContent.style.display = 'none';

        });
    } else {
        var elements = $(".taglib-header");
        elements.show();
        elements.each((index) => {
            elements[index].nextElementSibling.style.display = 'none';
        });
    }
});
javascript jquery

1 answer

0

Hello

I believe it was a simple at the time to define the last object to give display None

Forehead like this

 $("input[name='_3_keywords']").keyup(function() {

    var palavrasChave = $("input[name='_3_keywords']").val();
    if (palavrasChave.trim() !== "") {
        var content = document.querySelectorAll('.asset-full-content.show-asset-title');
        content.forEach((element) => {
            element.style.display = 'none';
        });
        $(".taglib-header").hide();
        var $elements = $(".taglib-header:contains(" + palavrasChave + ")");
        $elements.each((index) => {
            $elements[index].nextElementSibling.style.display = 'block';
        });

        var $elementsContent = $(".asset-full-content:contains(" + palavrasChave + ")");
        $elementsContent.each((index) => {
            $($elementsContent[index]).show();
            $($elementsContent[index]).find(".painel-faq").css( "display", "none");

            var itens = $($elementsContent[index]).find(".painel-faq .panel-title a:contains("+palavrasChave +")");
            itens.each((index) => {
               $(itens[index]).show();
$(itens[index]).parent().parent().parent().css("display","block")
            });

            $($elementsContent[index]).prev().show();  
            $($elementsContent[index]).style.display = 'none';

        });
    } else {
        var elements = $(".taglib-header");
        elements.show();
        elements.each((index) => {
            elements[index].nextElementSibling.style.display = 'none';
        });
      $('.painel-faq').show();  
    }
});

  • Paulohdsouza , the problem is that even if I type "search" it brings me the whole block. in the case of "Research Block", in this block item 6 should not come in the search, but it comes along with the block, even if it has no word "search".

  • Do you want THE BLOCK to come with the items or just the items inside the block? You are filtering the items inside the block or the block?

  • My logic was to appear in the case, only the blocks with the items containing the typed word. If the block has 10 items , and only 2 has the word search , the rest would be on display:None. ai se o cara apagasse na busca , would return all.

  • You are filtering BLOCK TITLE, you want to filter BLOCK ITEMS? That’s it?

  • In fact it would have to be filtered both. The guy could search by the word of the title and the block.

  • Test and see if that’s it

  • It’s a little short, but I’ve done a lot of tests and you’re bugging out doing the research. Ex: if you do the research, he finds almost all , but in the last block - Casoteca de Gestão Publica, if you type "notes" he does not think. I still don’t understand why. And when doing the search and delete in the search field, the items do not return, are only the items you searched for, that is, it does not recover all items from the block after the search.

  • @Thiagolourenço editions that change code or the direction of the post are not recommended on this site, always choose to inform the author, even if the error is explicit.

Show 3 more comments

Browser other questions tagged javascript jquery

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