vendredi 10 novembre 2017

HTML: Additional search filters control

I am using Node.js as a backend and JQuery as a frontend and I have a search box with filters as checkboxes below it see the next image Now when I click on the filter it will be added to a used filter list also provided as an image enter image description here

Then when i click on the x next to the filter it will be deleted and also unchecked. all of the prev things are working in the next code:

$('[id^="facet-"]').on('change',function(){
        let xMark = '<i id="'+$(this).attr('id')+'-remove-filter" class="fa fa-times-circle" aria-hidden="true"></i>'
        let key = $(this).data('key')
        let keyVal = '<div id="'+$(this).attr('id')+'-span" class="btn"><span>'+$(this).data('key')+ ' > ' +$(this).data('value')+'</span>'+xMark+'</div>'
        if($(this).is(':checked')){
            $('.'+key+'-filters').append(keyVal)
        }else{
            $('#'+$(this).attr('id')+'-span').remove()
        }
        $('i[id$="-remove-filter"]').on('click',function(){
            let checkboxId = $(this).attr('id').split('-remove-filter')[0]
            $('#'+checkboxId).prop('checked', 0)
            $(this).parent().remove()
        })
    })

As I said it's working and good so far, what should happen next is when you click on search it will take all checkboxes and post them to get some search results (this is also working since I surrounded the page with one form.

What I need is when the filters set has at least one checkbox inside it to be bordered like the next photo

I did this using the following piece of code:

$('[aria-controls="'+$(this).data('key')+'-facets"]').addClass('has-selected')

This will keep it bordered whenever some filter has been selected once and I can remove the border using

$('[aria-controls="'+$(this).data('key')+'-facets"]').removeClass('has-selected')

Here I have couple of questions

  • how to keep the border as long as there is at least one selected checkbox and remove it only when there are 0 selected? please note that there is more than one filters set!
  • I think this could be some sort of a library for people to use (with some adjustments of course). Where do I start with this?
  • Is there any better to apply this whole procedure? adding a filter , removing the checkbox?



Aucun commentaire:

Enregistrer un commentaire