Omar Omar - 2 months ago 8
CSS Question

Filter and search div text by ul li click

When you click the

li
, the
div
's below should be filtered based on the selected
li
data values. This is working but for some reason, when you first load the page you have to click an
li
twice for the filter to work.

Codepin Example

<div class="dropdown">
<a href="javascript:;" class="btn dropbtn selectBedrooms">select bedrooms <span class="icon downarrow"></span></a>

<ul id='filterFloorplans' onClick='filterFloorplans()' class="btn dropbtn">
<li data-value="1" class="dropdown-option">1 Bedroom</li>
<li data-value="2" class="dropdown-option">2 Bedrooms</li>
<li data-value="all" class="dropdown-option">all</li>
</ul>
</div>

<div class="floorplanscontainer">
<div class="unit">1 bedroom</div>
<div class="unit">1 bedroom</div>
<div class="unit">2 bedrooms</div>
</div>


<script>

function filterFloorplans()
{
$('.dropdown-option').click(function () {
var theValue = $(this).attr('data-value');

var rex = new RegExp(theValue);

if(rex =="/all/"){
clearFilter()
}else{
$('.unit').hide();

$('.unit').filter(function() {
return rex.test($(this).text());
}).show();
}
$('.dropdown ul.on').removeClass("on");
});
}

function clearFilter()
{
$('.filterFloorplans').val('');
$('.unit').show();
}

$('.selectBedrooms').click(function () {
$('.dropdown ul').toggleClass("on");
});

</script>

Answer

for some reason, when you first load the page you have to click an li twice for the filter to work.

That because the first click will attach the click event and second will fire it.

You have to attach the event outside of the function and you don't need the function filterFloorplans() at all, remove the onClick :

 onClick='filterFloorplans()'

And define the click event out of the function, check the working example below.

Hope this helps.

$(function(){ //ready function

  $('.dropdown-option').click(function () {
    var theValue = $(this).attr('data-value');
    var rex = new RegExp(theValue);

    if(rex =="/all/"){clearFilter()}else{
      $('.unit').hide();

      $('.unit').filter(function() {
        return rex.test($(this).text());
      }).show();
    }

    $('.dropdown ul.on').removeClass("on");
  });

  function clearFilter()
  {
    $('.filterFloorplans').val('');
    $('.unit').show();
  }

  $('.selectBedrooms').click(function () {
    $('.dropdown ul').toggleClass("on");
  });
});
.dropdown ul li {
  width:100%;
  border:1px solid red;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <a href="javascript:;" class="btn dropbtn selectBedrooms">select bedrooms <span class="icon downarrow"></span></a>
  <ul id='filterFloorplans' class="btn dropbtn">
    <li data-value="1" class="dropdown-option">1 Bedroom</li>
    <li data-value="2" class="dropdown-option">2 Bedrooms</li>
    <li data-value="all" class="dropdown-option">all</li>
  </ul>
</div>

<div class="floorplanscontainer">
  <div class="unit">1 bedroom</div>
  <div class="unit">1 bedroom</div>
  <div class="unit">2 bedrooms</div>
</div>

Comments