How to create a filter control using jquery?

Question

I am trying to create a filter control, however it doesn't work properly yet.

<div class="panel-filter-wrapper"><div class="panel-filter" data-filter-property="">
    <div class="panel-selected-filter">
        <span class="selected-filter-name">All</span>
        <span class="caret caret-down"></span>
    </div>
    <ul>
        <li data-value="*" data-param="role" class="selected">All</li>
        <li data-value="admin" data-param="role" class="">Admins</li>
        <li data-value="client" data-param="role">Clients</li>
        <li data-value="agent" data-param="role">Agents</li> 
    </ul>

The css code:

.panel-filter-wrapper {
 display: inline-block;
}
.panel-filter {
display: inline-block;
cursor: pointer;
position: relative;
color: #999;
}
.panel-filter .panel-selected-filter {
padding: 2px 19px 2px 10px;
border: 1px solid transparent;
position: relative;
z-index: 1;
}
.panel-filter:hover,
.panel-filter.active {
color: #444;
}
.panel-filter:hover .panel-selected-filter,
.panel-filter.active .panel-selected-filter {
 border: 1px solid #ccc;
 background: #fff;
}
.panel-filter:hover .caret,
.panel-filter.active .caret {
 display: inline-block;
}
.panel-filter.active .panel-selected-filter {
 border-bottom-width: 0;
}
.panel-filter.active ul {
display: block;
}
.panel-filter ul {
list-style: none;
display: none;
position: absolute;
border: 1px solid #ccc;
top: 24px;
left: 0;
margin: 0;
min-width: 100%;
z-index: 0;
background: #fff;
font-size: 13px;
border-radius: 2px;
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.panel-filter li {
padding: 5px 15px;
white-space: nowrap;
color: #333;
}
.panel-filter li:first-child {
border-top: none;
}
.panel-filter li:hover {
background-color: #f2f4f8 !important;
color: #181a1c;
}
.panel-filter li.selected {
font-weight: bold;
}
.panel-filter .caret {
display: none;
position: absolute;
right: 5px;
top: 9px;
}

.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-right: 4px solid transparent;
border-left: 4px solid black;
content: "";
}
.caret,
.caret-down {
border-bottom: 4px solid transparent;
border-top: 4px solid black;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

The code example is on JSfiffle. The promlem is that the jquery does not handle the click event and the items list does not display. The control should looks (behave) like:

enter image description here

Well actually the jquery code is the question. How can I add it to handle this event? Thank you. — plywoods
– plywoods, Commented Jul 29, 2014 at 7:34
Let's see the jquery code it's not in your jsfiddle as well. — Popsyjunior
– Popsyjunior, Commented Jul 29, 2014 at 7:37
I need to add something like $("div.panel-selected-filter").click(function () {$(this).something here}); to make it work! — plywoods
– plywoods, Commented Jul 29, 2014 at 7:51

AmanVirdi · Accepted Answer · 2014-07-29 09:05:02Z

1

Try this, It should work as expected. Working Fiddle.

jQuery:

$(document).ready(function(){
     $(".panel-selected-filter").click(function() { // show the dropdown list
         $('.panel-filter > ul').show();
     });

     $('.panel-filter > ul > li').click(function() {  // select and hide the the list
         $('.selected-filter-name').text($(this).text());
         $('.panel-filter > ul').hide();
     });

     $(document).click(function(e){           // hide list if clicked outside
         if($(e.target).is('.panel-selected-filter, .panel-selected-filter *'))return;
             $('.panel-filter > ul').hide();
     });
});

And I have add padding: 0px; in your css class, like this:

CSS:

.panel-filter ul {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: none;
    font-size: 13px;
    left: 0;
    list-style: none outside none;
    margin: 0;
    min-width: 100%;
    padding: 0;          /* added to align li's to the left*/
    position: absolute;
    top: 24px;
    z-index: 0;
}

edited Jul 29, 2014 at 9:05

answered Jul 29, 2014 at 7:51

AmanVirdi

1,6852 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

plywoods Over a year ago

With this code, my caret disappears. And I can not select the element from the list.

AmanVirdi Over a year ago

I have edited the jQuery code for selecting the item and display as the selected item. The caret may be disappears due to css. It was also not in the Fiddle provided by you.

AmanVirdi Over a year ago

I have added a symbol to check the caret. <span class="caret caret-down">^</span>. This is working fine.

AmanVirdi Over a year ago

you can add .blur() event on the '.panel-filter > ul > li' and hide the 'ul'. I have not tried this with your code, but it shuld work.

AmanVirdi Over a year ago

I have edited my answer and added the code for hiding the list if clicked outside. .blur() and .focusout() do only work with A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA elements.

|

GKS · Accepted Answer · 2014-07-29 07:38:53Z

0

<script>

    function showFileter()
    {

        var ul = document.getElementById('FilterOption');
        ul.style.display = (ul.style.display == "none") ? "block" : "none";
    }

</script>

<div class="panel-filter-wrapper"><div class="panel-filter" data-filter-property="">
    <div class="panel-selected-filter" onClick='showFileter()'>
        <span class="selected-filter-name">All</span>
        <span class="caret caret-down"></span>
    <ul id="FilterOption" style='display:none;padding:0;'>
        <li data-value="*" data-param="role" class="selected">All</li>
        <li data-value="admin" data-param="role" class="">Admins</li>
        <li data-value="client" data-param="role">Clients</li>
        <li data-value="agent" data-param="role">Agents</li> 
    </ul>
    </div>

    </body>

edited Jul 29, 2014 at 7:38

answered Jul 29, 2014 at 7:07

GKS

1161 silver badge5 bronze badges

1 Comment

plywoods Over a year ago

It is not exactly what I want. The menu must appear on click! Not on hover.

Collectives™ on Stack Overflow

How to create a filter control using jquery?

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related