JQuery - 使用不同输入的多个过滤器过滤数据属性 [英] JQuery - Filtering data attributes with multiple filters of different inputs
问题描述
我正在开发一个项目，我希望使用JQuery来过滤嵌入到页面上的div上的数据变量，这种变化就像一个展示，用户可以通过各种方式进行过滤。所以我在我的部门有以下几个方面：
HTML结果
< div class =box col-xs-6 col-sm-4 col-md-3 col-lg-2
data-remote-name =BFT Mitto B RCB - 2键遥控器
data-remote-model =Mitto B RCB 2
data-remote-freq =433
data-remote-dips =
data-remote-clone =style =display：block;>
数据是从SQL表中提取的，其中数百个是由相关数据生成的。
以下是单独使用这个名称的方法，但是我似乎无法找到一种方法来对所有其他输入进行过滤，还有名称和模型看着这一个输入。
JS /查询
regExModel = new RegExp（$（'＃search-name'）。val（）。trim（），ig）;return $（this）.data （remote-name）。match（regExName）;
}）。show（）;
接着是页面顶部，过滤标准在哪里。它目前包含1个文本输入，2个复选框和2个下拉菜单。
< div role =formname =filters-form ID = 过滤器形式的 >
< div class =col-sm-12>
< input class =form-controlid =search-nameplaceholder =Search for name or model .../>
< / div>
< div class =col-sm-3 col-xs-6>
< div class =checkbox>
< label>
< input type =checkboxid =dispwitchvalue =dispwitch>
有Dip开关吗？
< / label>
< / div>
< div class =checkbox>
< label>
< input type =checkboxid =cloneablevalue =cloneable>
是否可以复制？
< / label>
< / div>
< / div>
< div class =col-sm-3 col-xs-6>
频率：
< select class =freq-dropdown form-controlid =frequencystyle =width：100％;>
< option value =all>全部< / option>
<？php foreach（$ this->频率AS $频率）{
echo< option value = \。$ frequency-> frequency。\> 。频率 - >频率。 < /选项> 中;
}？>
< / select>
< / div>
< div class =col-sm-3 col-xs-6>
制造商：
< select class =manufacturer-dropdown form-controlid =manufacturerstyle =width：100％;>
< option value =all>全部< / option>
<？php foreach（$ this->制造商AS $制造商）{
echo< option value = \。$ manufacturer-> name。\> 。 $ manufacturer->名称。 < /选项> 中;
}？>
< / select>
< / div>
< div class =col-sm-3 col-xs-6>
< / div>
任何帮助将不胜感激。
编辑：
下面是我当前的JS文件以及data的输出，这是我用来存储过滤器状态的对象。 / p>
$（function（）{
$（'。nav> li＃remotes'）。toggleClass（'active '）;
var data = {dips：null，cloneable：null，freq：null，manufacturer：null};
$（＃filters-form）。如果（更改键盘粘贴，函数（）{
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（）;
$（'。 （$（'＃search-name'）。val（）。trim（），ig）;
（） regExModel = new RegExp（$（'＃search-n ame'）.val（）。trim（），ig）;
return $（this）.data（remote-name）。match（regExName）;
//我拿出了以前的答案变化，这个目前通过名称进行过滤。
}）。show（）;
console.log（data）;
}）;
}）;
EDIT2：
还有一点需要注意的是，其中一些值是true / false / null，因此需要在过滤器中进行说明。例如，我得到复选框过滤半工作与以下;
返回$（this）.data（remote-名称）。match（regExName）&& $（this）.data（remote-clone）== data.cloneable&& $（this）.data（remote-dips）== data.dips;
但是...对于那些有 [data-remote-dips = ] 与1或0相对，一旦过滤器打开或关闭一次，空值将永远不会显示，直到刷新。同样的问题，把下拉菜单放到全部而不是所需的结果上，然后页面上什么也没有显示出来。
在JSFiddle玩了半天之后，我设法按照我的意愿使用RegExp，像@David Johnson提到的那样。
https://jsfiddle.net/JokerDan/tqv0ybbz/2/
工作HTML
< div class =status>< / div>
< div id =filterDiv>
< input type =textclass =myInputid =0/>
< select class =mySelid =1>
< option value =>全部< / option>
< option value =a> A< / option>
< option value =b> B< / option>
< option value =c> C< / option>
< / select>
< select class =mySelid =2>
< option value =>全部< / option>
< option value =123> 123< / option>
< option value =231> 231< / option>
< option value =321> 321< / option>
< / select>
< input type =checkboxid =3>测试数据:: 1 | 0 | NULL
< / div>
< p class =p c 321data-name =cherrydata -a =cdata-b =321data-test => Cherry C 321 X< / p>
< p class =pa 123data-name =elderberrydata -a =adata-b =123data-test =1>接骨木A 123 1< / p> ;
图C 231 1< / p> ;
工作JS
on（change keyup，function（）{
chkBox = {datatest：null};
$ b $（'＃c $ c $> （$：'＃3'）。（'：checked'））{chkBox.datatest =1;} else {chkBox.datatest =;}
$（ （）（$（'＃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）&& $ b match（regExB）&&&
（this）.attr（data-test）。match（regExTest）
）;
//console.log（rtnData）;
return rtnData;
}）。show（）;
} ）;
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.
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();
});
这篇关于JQuery - 使用不同输入的多个过滤器过滤数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
