<html>
<head>
<style>
#buttons li { display: inline; }
#filter { background-color: yellow; }
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<h3>Filter on following fluids</h3>
<ul style="list-style-type: none" id="buttons">
<li><button style="background-color: deepskyblue" onclick="displayFluids()">Show All</button></li>
</ul>
<hr/>
<h3>If an item does not contain the filter entry, it will not be visible</h3>
<h4>Must contain <span id="filter"></span></h4>
<ul id="fluids"></ul>
<script>
const allFluids = ["coffee", "wine", "orange juice", "apple juice", "milk"];
let list = [
["coffee", "wine", "orange juice", "apple juice", "milk"],
["coffee"],
["wine", "apple juice", "milk"],
["orange juice", "wine"],
["apple juice", "milk"],
["wine"]
];
// retrieve query parameters from the URL
let params = new URLSearchParams(location.search.substr(1)).entries();
const filter = Array.from(params).find(param => param[0] == 'filter');
// if a filter is present, apply it
displayFluids(filter && JSON.parse(filter[1]));
showFilterButtons();
function displayFluids(filter) {
const fluidsEl = $('#fluids').empty();
filterList(filter).forEach(fluids => fluidsEl.append(`<li>${fluids.join(', ')}</li>`))
$('#filter').empty().text(filter ? filter.join(' or ') : 'nothing');
rewriteUrl(filter ? { filter } : {});
}
function filterList(filter) {
if (!filter || filter.length == 0) return list;
return list.filter(entry => entry.some(item => filter.indexOf(item) > -1));
}
// the main attraction
function rewriteUrl(params = {}) {
let qp = Object.keys(params).reduce((res, key) => {
return res + '&' + key + '=' + JSON.stringify(params[key]);
}, '').substr(1);
if (qp.length > 0) qp = '?' + qp;
history.pushState(null, '', location.origin + qp);
}
function showFilterButtons() {
const bttns = $('#buttons');
allFluids.forEach(fluid => {
bttns.append(`<li>
<button onclick="displayFluids(['${fluid}'])">${fluid}</button>
</li>`)
});
}
</script>
</body>
</html>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.