How to make multiple filter in jquery?

Tell me how to implement multiple filter?

5cf610566cb26749269908.png

In each warehouse there are products categorized. First displayed at the full list by clicking on the filters on the right remain the goods selected categories.

As in the "only products" to convey the total number of all goods in the warehouse?

How best to structure the data and where to store them, if you make a big base on a few stores and 1000 products? What would you recommend? JSON, XML?



Thank you!
March 23rd 20 at 19:00
1 answer
March 23rd 20 at 19:02
Solution
I would do so.
Do IPAS, say in PHP, and when you call the AJAX to the API defined with POST or GET requests I would give him a JSON which is already dismantled, would in JS to replace the information on the screen.
Thus it is possible without reloading the entire page but only the parts with results to organize the display of the warehouse.

---------------------------getJSON.php------------------------
<?php
 $result = new StdClass(); 
if($_POST['filterName']){

 $result->success = true;
 $result->message = "SOME DATA";

 } else {
 $result->error = true;
 $result->errorMessage = "Not lucky";
}

 $json = json_encode($json);
 echo $json;
?>
---------------------------getJSON.php------------------------

---------------------------index.html--------------------------
the <body>
 <form id="formID">
 <select name="filterName">
<option>option 1</option>
<option>2</option>
<option>3</option>
</select>
 <select name="filterName2">
<option>option 1</option>
<option>2</option>
<option>3</option>
</select>
</form>
 <div id="placeReplace">
 some html
</div>
</body>
the <script>
$("select.someSelect").on("change",function(){
sendFormGetJSON();
 return false;
});

sendFormGetJSON function() {
 var f = $('#formID').serializeObject();
$.ajax({
 url: "getJSON.php",
 type: "POST",
 dataType: "json",
 data: {
"filterName":f.filterName,
"filterName2":f.filterName2,
},
 success: function(data){
setTimeout(function(){
 if (data.success == true){
$("#placeReplace").html(data.successMessage);
}else{
alert(data.errorMessage);
}
 }, 1000);
},
 error: function(){
 alert("an error Occurred, please try again later");
}
});

}

$.fn.serializeObject = function(){
 var o = {};
 var a = this.serializeArray();
 $.each(a, function() {
 if (o[this.name] !== undefined) {
 if (!o[this.name].push) {
 o[this.name] = [o[this.name]];
}
 o[this.name].push(this.value || ");
 } else {
 o[this.name] = this.value || ";
}
});
 return o;
};
</script>
---------------------------index.html--------------------------
@Garret.Ward45 , thank you very much! - Helene.Moen commented on March 23rd 20 at 19:05
There are errors found, rewrote a bit.
But this is hopefully just an example of how to make a request. In the API it is necessary to prescribe the normal handler for incoming filters, and the results of the response.
Not for that :)) - Garret.Ward45 commented on March 23rd 20 at 19:08
@Garret.Ward45, and be sure to use select? for some reason the examples of json all which there is drop down lists. It to filters and warehouses were in the form of buttons. You can send a request with a div using the attribute data, for example? - Helene.Moen commented on March 23rd 20 at 19:11
You can use anything. The main thing that the request got the appropriate option. If it is a div tag with the date it probably would have before Ajax request to change the serialization form type
var filterName = $("#divID").data("option");
With all the other attendant changes.

Well, the Ajax call accordingly by clicking on this div to bind.
$("div.someDiv").on("click",function(){
sendFormGetJSON($(this));
 return false;
});

sendFormGetJSON function(e) {
 var filterData = e.data("option");
$.ajax({
 url: "getJSON.php",
 type: "POST",
 dataType: "json",
 data: {
"filterData":filterData,
},
 success: function(data){
setTimeout(function(){
 if (data.success == true){
$("#placeReplace").html(data.successMessage);
}else{
alert(data.errorMessage);
}
 }, 1000);
},
 error: function(){
 alert("an error Occurred, please try again later");
}
});

}

Something like this distribute, well, API is already processing $_POST['filterData'] - Garret.Ward45 commented on March 23rd 20 at 19:14

Find more questions by tags jQuery