Zylo Zylo - 2 months ago 13
CSS Question

Adding/Removing Search filters dynamically with Jquery

I'm currently trying to build a post filter section into a website and need some help with the JavaScript/jqeury that goes along with it. Below you can see an example of the layout visually and the html layout.

The sequence of events will go as follows:


  • User selects from the top list of filters(bottom tags are not visible until selected)

  • Once selected the "selected tag filter disappears from the top list and is added to the bottom("circular tags")".

  • the user can also delete the tags and they will return to the top list of filters.



The way I imagined this working:

Selecting a Filter
- check for "checked checkbox"
- add selected "checkbox" label + value attribute to an array
- get the last values added to the array and create new filter tag underneath under content tag container

Removing a Filter
- user clicks the small x on the tag they wish to remove
- the tag is removed added back to the top list of filters and removed from the array

Filters Preview

<div class="blog-feed-filters">
<h5>FILTER</h5>

<div class="checkbox">
<input class="checkbox-active" id="check1" type="checkbox" name="filter" value="1">
<label for="check1">Turas Application Updates</label>
<br>
<input class="checkbox-active" id="check2" type="checkbox" name="filter" value="2">
<label for="check2">General News</label>
<br>
<input class="checkbox-active" id="check3" type="checkbox" name="filter" value="3">
<label for="check3">Organisation Updates</label>
<br>
<input class="checkbox-active" id="check4" type="checkbox" name="filter" value="4">
<label for="check4">UI Updates</label>
</div>
<hr />
<div id="content-tag-container">
<div class="content-tag">Update <a href="">✕</a></div>
<div class="content-tag">Mobile Applications <a href="">✕</a></div>
<div class="content-tag">New website update <a href="">✕</a></div>
<div class="content-tag">Update <a href="">✕</a></div>
</div>
</div>


JavaScript/ Jquery Please excuse the mess. I'm a noob:D

$('.checkbox-active').click(function () {

//check to see if the checkbox has been "checked"
if (document.getElementById('check1').checked) {

var filtersSelected = [];

//get the item that has been checked and add it to an array
$.each($("input[name='filter']:checked"), function () {
filtersSelected.push($(this).val() + $("label[for='checkbox-active']").innerText);
});
//find the last item in the array
if (!Array.prototype.last) {
Array.prototype.last = function () {
return this[this.length - 1];
};
};
//create a new filter tag and add it to the content-tag-container div
for (var c in filtersSelected.last()) {
var newElement = document.createElement('div');
newElement.className = "content-tag";
newElement.innerHTML = "<a href=''>" + "✕" + "</a>";
document.getElementById("content-tag-container").appendChild(newElement);
};

}

});


Any help is appreciated. Cheers

Answer

I made some changes in your javascript :

$(document).ready( function() {
    $('.checkbox-active').click(
            function() {
                //console.log("Hi");
                //check to see if the checkbox has been "checked"


                    var filtersSelected = [];
                    //console.log($("input[name='filter']:checked"));

                    //get the item that has been checked and add it to an array
                    var pushed=false;
                    $.each($("input[name='filter']:checked"), function() {
                        //console.log( );
                        filtersSelected.push($(this).val() + $("label[for='"+$(this).attr('id')+"']").text());
                        $("label[for='"+$(this).attr('id')+"']").remove();
                        $(this).remove();
                        pushed=true;
                    });
                    console.log(filtersSelected);
                    //find the last item in the array
                    if (!Array.prototype.last) {
                        Array.prototype.last = function() {
                            return this[this.length - 1];
                        };
                    }
                    ;
                    //create a new filter tag and add it to the content-tag-container div 
                    if(pushed){
                    var c = filtersSelected.last(); 
                        var newElement = document.createElement('div');
                        newElement.className = "content-tag";
                        newElement.innerHTML = c + "<a href=''>" + "X" + "</a>";
                        document.getElementById("content-tag-container")
                                .appendChild(newElement);
                    }


            });
});

Above code is partially running to add checked values in filtered list. Replace your javascript with above code.