This question seems too broad for a specific solution. To receive help from the community, you should provide the actual code that needs to be implemented.
Based on my observation, Ajax is used to dynamically update the page content according to filter options.
A simple form of filtering involves displaying certain items on the page while hiding others based on selected filters.
Below is a basic example: blue represents metric units, green represents inches. Clicking "clear" will reset the filter. This serves as a fundamental illustration of how filters can work.
$(".filter span").click(function(){
$(".filter span").removeClass("selected");
$(this).toggleClass("selected");
var theClass = $(this).attr("class");
theClass = theClass.replace(" selected","");
if ( theClass === "metric" ) {
$(".items .inch").hide();
$(".items .metric").show();
} else if ( theClass === "inch" ){
$(".items .inch").show();
$(".items .metric").hide();
} else {
$(".item").show();
$(".filter span").removeClass("selected");
}
});
.filter {
width: 100%;
display: block;
float: left:
}
.items {
width: 100%;
display: block;
float: left;
}
.item {
display: block;
float: left;
width: 10%;
margin-right: 10px;
margin-bottom: 10px;
border: solid 1px #ccc;
padding: 10px;
text-align: center;
}
.items .inch {
background: #0f0;
}
.items .metric {
background: #00f;
}
.filter span:hover {
cursor: pointer;
font-weight: 900;
padding: 2px;
border: solid 1px #000;
}
.selected {
font-weight: 900;
padding: 2px;
border: solid 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
Choose: <span class="metric">metric</span> <span class="inch">inch</span><span class="clear"> clear</span>
</div>
<ul class="items">
<div class="item metric">1. metric</div>
<div class="item inch">2. inch</div>
<div class="item metric">3. metric</div>
<div class="item metric">4. metric</div>
<div class="item inch">5. inch</div>
<div class="item metric">6. metric</div>
<div class="item metric">7. metric</div>
<div class="item inch">8. inch</div>
<div class="item metric">9. metric</div>
</ul>