<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>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.