JQuery - Filtering data attributes with multiple filters of different inputs

Question

I am working on a project where by I want to use JQuery in order to filter on data variables embedded onto divs that are on the page, its sort of like a showcase in which the users will be able to filter in various ways. So I have the following in my Div;

HTML Result

<div class="box col-xs-6 col-sm-4 col-md-3 col-lg-2" 
    data-remote-name="BFT Mitto B RCB - 2 Button Remote" 
    data-remote-model="Mitto B RCB 2" 
    data-remote-freq="433" 
    data-remote-dips="" 
    data-remote-clone="" style="display: block;">

Data is pulled from an SQL table and hundreds of these are generated wit relevant data.

I got the following for working with the name alone, but I can't seem to figure out a way to have it filter on all the other inputs, as well as have the name and model looked at with this one input.

JS/Query

$('.box').hide().filter(function() {
    regExName = new RegExp($('#search-name').val().trim(), "ig");
    regExModel = new RegExp($('#search-name').val().trim(), "ig");
    return $(this).data("remote-name").match(regExName);
}).show();

This is then towards the top of the page and where the filtering criteria is. It currently contains 1 text input, 2 check boxes and 2 dropdowns. There will be many, many more filters when done.

  <div role="form" name="filters-form" id="filters-form">
<div class="col-sm-12">
  <input class="form-control" id="search-name" placeholder="Search for name or model..."/>
</div>

<div class="col-sm-3 col-xs-6">
  <div class="checkbox ">
    <label>
      <input type="checkbox" id="dispwitch" value="dispwitch">
      Has Dip Switches?
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" id="cloneable" value="cloneable">
      Cloneable?
    </label>
  </div>
</div>  

<div class="col-sm-3 col-xs-6">
  Frequency:
  <select class="freq-dropdown form-control" id="frequency" style="width:100%;">
    <option value="all">All</option>
    <?php foreach ($this->frequencies AS $frequency) {
      echo "<option value=\"" . $frequency->frequency . "\">" . $frequency->frequency . "</option>";
    }?>
  </select>
</div>

<div class="col-sm-3 col-xs-6">
  Manufacturer:
  <select class="manufacturer-dropdown form-control" id="manufacturer" style="width:100%;">
    <option value="all">All</option>
    <?php foreach ($this->manufacturers AS $manufacturer) {
      echo "<option value=\"" . $manufacturer->name . "\">" . $manufacturer->name . "</option>";
    }?>
  </select>
</div>

<div class="col-sm-3 col-xs-6">

</div>

Any help would be greatly appreciated.

EDIT: Below is my current JS file as well as the output of 'data' which is an object i use to store states of filters.

$(function() {
$('.nav > li#remotes').toggleClass('active');

var data = { dips: null, cloneable: null, freq: null, manufacturer: null }; 

$("#filters-form").on("change keyup paste", function(){
    if ($('#dispwitch').is(':checked')) { data.dips = "1"; } else { data.dips = "0"; }
    if ($('#cloneable').is(':checked')) { data.cloneable = "1"; } else { data.cloneable = "0"; }
    data.freq = $('#frequency').val();
    data.manufacturer = $('#manufacturer').val();

    $('.box').hide().filter(function() {
        regExName = new RegExp($('#search-name').val().trim(), "ig");
        regExModel = new RegExp($('#search-name').val().trim(), "ig");
        return $(this).data("remote-name").match(regExName); 
        //I took out the previous answers changes, this currently works filtering via name.
    }).show();
    console.log(data);
});

});

EDIT2: Another thing of note is some of the values are true/false/null so that needs to be accounted for in the filters. For example I got the check box filters semi-working with the following;

return $(this).data("remote-name").match(regExName) && $(this).data("remote-clone") == data.cloneable && $(this).data("remote-dips") == data.dips;

BUT... For those which have [data-remote-dips=""] as oppose to 1 or 0, once the filter is turned on or off a single time, the null valued are never shown until a refresh. Same issue with putting the dropdown to 'All' instead of a desired result, it then shows nothing on the page.

Dan_ · Accepted Answer · 2016-02-03 14:06:52Z

So after half a day of playing with JSFiddle I managed to get it working as I wanted, using RegExp as @David Johnson had menntioned.

https://jsfiddle.net/JokerDan/tqv0ybbz/2/

Working HTML

<div class="status"></div>
<div id="filterDiv">
  <input type="text" class="myInput" id="0"/>

  <select class="mySel" id="1">
    <option value="">All</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </select>

  <select class="mySel" id="2">
    <option value="">All</option>
    <option value="123">123</option>
    <option value="231">231</option>
    <option value="321">321</option>
  </select>

  <input type="checkbox" id="3"> Test Data :: 1 | 0 | NULL
</div>
<p class="p a 123" data-name="apple" data-a="a" data-b="123" data-test="1">Apple A 123 1</p>
<p class="p b 123" data-name="banana" data-a="b" data-b="123" data-test="0">Banana B 123 0</p>
<p class="p c 321" data-name="cherry" data-a="c" data-b="321" data-test="">Cherry C 321 X</p>
<p class="p a 321" data-name="date" data-a="a" data-b="321" data-test=""> Date A 321 X</p>
<p class="p a 123" data-name="elderberry" data-a="a" data-b="123" data-test="1">Elderberry A 123 1</p>
<p class="p c 231" data-name="fig" data-a="c" data-b="231" data-test="1">Fig C 231 1</p>

Working JS

$('#filterDiv').on("change keyup", function() {
  chkBox = { datatest: null };

  if ($('#3').is(':checked')) { chkBox.datatest = "1"; } else { chkBox.datatest = ""; }

  $("p").hide().filter(function() {
    var rtnData = "";

    regExName   = new RegExp($('#0').val().trim(), "ig");
    regExA          = new RegExp($('#1').val().trim(), "ig");
    regExB          = new RegExp($('#2').val().trim(), "ig");
    regExTest       = new RegExp(chkBox.datatest, "ig")

    rtnData = (
      $(this).attr("data-name").match(regExName) && 
      $(this).attr("data-a").match(regExA) && 
      $(this).attr("data-b").match(regExB) &&
      $(this).attr("data-test").match(regExTest)
    );

    //console.log(rtnData);
    return rtnData;
  }).show();
});

David Johnson · Accepted Answer · 2016-02-02 13:05:31Z

0

Don't you just need to extend the condition like this:

freq = new RegExp($('#frequency').val().trim(), "ig"); 
dips= new RegExp($('#dispwitch').val().trim(), "ig");
clone= new RegExp($('#cloneable').val().trim(), "ig");

return $(this).data("remote-name").match(regExName) || $(this).data("remote-freq").match(freq) || $(this).data("remote-dips").match(dips) || $(this).data("remote-clone").match(clone)

edited Feb 2, 2016 at 13:05

answered Feb 2, 2016 at 12:54

David Johnson

585 bronze badges

1 Comment

Dan_ Over a year ago

Does not seem to be working, the text filter now doesn't filter at all and instead just hides all, the selectable filters have no effect. Console shows type error of: TypeError: $(...).data(...).match is not a function // ...("remote-name").match(regExName) || $(this).data("remote-freq").match(freq) || $... // Error shows on $(this).data("remote-freq").

Collectives™ on Stack Overflow

JQuery - Filtering data attributes with multiple filters of different inputs

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related