Skip to content

Instantly share code, notes, and snippets.

@miwebguy

miwebguy/javascriptfilter

Created March 18, 2025 15:11
Show Gist options
  • Save miwebguy/24d825d40f0037f663d7c95d8a29ef43 to your computer and use it in GitHub Desktop.
Save miwebguy/24d825d40f0037f663d7c95d8a29ef43 to your computer and use it in GitHub Desktop.
Download ZIP
concept: Javascript filter with querystring
Raw
javascriptfilter
<html>
<head>
<script>
//<![CDATA[
//Not Tested for Accessiblity
/**
* List Filter
* @usage: <input type="search" onkeyup="Listfilter(this,'_id')" />
* where _id is the id of the list container
*/
function Listfilter (phrase, _id) {
EQFilter.value = phrase.value;
var words = phrase.value.toLowerCase().split(" ");
var list = document.getElementById(_id).getElementsByTagName('eqbox');
var ele;
for (var r = 0; r < list.length; r++ ) {
ele = list[r].innerHTML.replace(/<[^>]+>/g,"");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i])>=0) { displayStyle = '';}
else { displayStyle = 'none'; break; }
}
list[r].style.display = displayStyle;
removeQueryString();
}
}
function getQueryParam(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name);
}
function removeQueryString() {
const newUrl = window.location.origin + window.location.pathname; // Origin + pathname
if (history.pushState) {
// Modern browsers
window.history.pushState({ path: newUrl }, '', newUrl);
} else {
// Older browsers (fallback)
window.location.replace(newUrl);
}
}
window.addEventListener("load", (event) => {
const qValue = getQueryParam('q');
if (qValue) {
document.getElementById("EQFilter").value = qValue;
Listfilter(document.getElementById("EQFilter"),"Equipment");
console.log('Value of q:', qValue);
} else {
console.log('q parameter not found');
}
});
//]]>
</script>
</head>
<body>
<fieldset class='quickfilters' style='margin:1em;padding:1em'><legend>Quick Single Option Filters</legend>
<label><input name='filter' class='buttonlink' type='radio' onclick ="Listfilter(this,'Equipment');" value='5000' />5000 lb</label>
<label><input name='filter' class='buttonlink' type='radio' onclick ="Listfilter(this,'Equipment')" value='8000' />8000 lbs</label>
<label><input name='filter' class='buttonlink' type='radio' onclick ="Listfilter(this,'Equipment')" value='12000' />12000 lbs</label>
<label><input name='filter' class='buttonlink' type='radio' onclick ="Listfilter(this,'Equipment')" value='Electric'/>Electric</label>
<label><input name='filter' class='buttonlink' type='radio' onclick ="Listfilter(this,'Equipment')" value='Cushion'/>Cushion</label>
<label><input name='filter' class='buttonlink' type='radio' onclick ="Listfilter(this,'Equipment')" value='Counterbalance'/>Counterbalance</label>
</fieldset>
<p class='atr'>
<label>Filter </label>
<input id='EQFilter' type='search' onkeyup="Listfilter(this, 'Equipment')" placeholder='example Nissan 5000' />
<label><input name='filter' class='buttonlink clearinput' type='radio' onclick ="Listfilter(this,'Equipment');" value=' ' />Clear</label>
</p>
</div>
<section id='Equipment' class='equipment page mg40'>
<tal:block tal:repeat="e equipment">
<eqbox class='eqcatbox'>
<a class='noline' href="${e/link}">
<div class='eqimg border unzoom'>
<img src="" alt=''/>
<img src="" alt=''/>
</div>
<div class='eqtext atc'><b>Desc</b>
<div class='eqdesc'>equipment_type</div>
<div class='eqdesc'> capacity 8000 lbs</tal:block></div>
</div>
</a>
</eqbox>
</tal:block>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment