Skip to content

Search/Filter Integration: Update Counter and Improve Visual Feedback #8862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
computarisis wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

Search/Filter Integration: Update Counter and Improve Visual Feedback #8862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
188dbfe
Make Applied Filters section visible without in mobile without requir…
computarisis Nov 6, 2026
b190df6
Integrate search terms into the filtering system, allowing multiple s…
computarisis Nov 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions _sass/elements/_dropdown_filters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,8 +267,14 @@ a.clear-filter-tags {
// flex-direction: column;
}
// Hide applied filter tags in collapsed mobile toolbar
.filter-tag-container {
display: none;
.filter-tag-container {
display: flex;
flex-direction: column;
padding: 0 12px 10px;

&:empty {
display: none;
}
}
.scroll-lock {
overflow: hidden;
Expand Down
149 changes: 93 additions & 56 deletions assets/js/current-projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,21 +352,35 @@ function searchEventHandler(e){
else if(e.target.closest(".search-bar-mobile"))
searchTerm = document.querySelector("#search-mobile").value;

const filterParams = Object.fromEntries(new URLSearchParams(window.location.search));
let tokenObj={};
tokenObj['Search']=searchTerm;

const filterParams = Object.fromEntries(new URLSearchParams(window.location.search));

if (Object.keys(filterParams).length>0) {
for(const [key,value] of Object.entries(filterParams)){
if (key !== 'Search'){
tokenObj[key]=value.split(',');
}
}
}

const searches = filterParams.Search
? filterParams.Search.split(',')
: [];

if (!searches.includes(searchTerm)) {
searches.push(searchTerm);
}
//include entire array of search keywords
if (searches.length > 0) {
tokenObj['Search'] = searches;
}

let queryString = Object.keys(tokenObj).map(key => key + '=' + tokenObj[key]).join('&').replaceAll(" ","+");

window.history.replaceState(null,'',`?${queryString}`)
}



function searchEnterKeyHandler(e){
if (e.key === "Enter") {
Expand Down Expand Up @@ -496,10 +510,24 @@ function updateCategoryCounter(filterParams){
// Calculate total selected filters across all categories (excluding Search)
let totalSelected = container.reduce((sum, [,val]) => sum + val, 0);

// Add count of keywords for search filter
const searchCount = (filterParams.Search || []).filter(term => term.trim() !== '').length;
totalSelected += searchCount;

// Update each category counter – preserve existing behaviour of showing combined totals
for(const [key] of container){
document.querySelector(`#${key}`) && (document.querySelector(`#${key}`).innerHTML = ` (${totalSelected})`);
}
//for(const [key] of container){
//document.querySelector(`#${key}`) && (document.querySelector(`#${key}`).innerHTML = ` (${totalSelected})`);

document.querySelectorAll('.number-of-checked-boxes').forEach(counter => {
if (counter.id !== 'counter_total') {
counter.innerHTML = totalSelected > 0
? ` (${totalSelected})`
: '';
}
}
);



// Update the new overall filters counter in the title
const totalCounterSpan = document.querySelector('#counter_total');
Expand Down Expand Up @@ -548,67 +576,76 @@ function updateProjectCardDisplayState(filterParams){
}
}
else if(key==="Search"){
let searchTerm=value[0];
let operators=["AND","OR","-"];
let tokens=[];
if(searchTerm.includes(" ")){tokens=searchTerm.split(" ");}
else{tokens[0]=searchTerm}
for (let i = 0; i < tokens.length; i++) {
let token = tokens[i];
if (operators.includes(token)) {
let nextToken=tokens[i+1];
if (token === "AND"){
let searchRegex= new RegExp(nextToken,'gi');

//scan each keyword for search filter
for (const searchTerm of value) {

let operators=["AND","OR","-"];
let tokens=[];
if(searchTerm.includes(" ")){tokens=searchTerm.split(" ");}
else{tokens[0]=searchTerm}
for (let i = 0; i < tokens.length; i++) {
let token = tokens[i];
if (operators.includes(token)) {
let nextToken=tokens[i+1];
if (token === "AND"){
let searchRegex= new RegExp(nextToken,'gi');
let noMatchDataset=0;
for(const [key,value] of Object.entries(projectCardObj)){
if( value.filter(x => searchRegex.test(x) ).length == 0){
noMatchDataset++;
if(noMatchDataset==5){cardsToHideContainer.push([key,projectCard.id]);}
}
}
}
else if(token === "OR"){
let searchRegex= new RegExp(nextToken,'gi');
let noMatchDataset=0;
for(const [key,value] of Object.entries(projectCardObj)){
if( value.filter(x => searchRegex.test(x) ).length > 0){
cardsToHideContainer.pop();
projectCard.style.display = 'list-item' ;
break;
}
}
}

i++;
}
else if(token.includes("-")){
let searchToken=token.substr(1);
let searchRegex= new RegExp(searchToken,'gi');
let noMatchDataset=0;
for(const [key,value] of Object.entries(projectCardObj)){
if( value.filter(x => searchRegex.test(x) ).length == 0){
noMatchDataset++;
if(noMatchDataset==5){cardsToHideContainer.push([key,projectCard.id]);}
}
if( value.filter(x => searchRegex.test(x) ).length > 0){

cardsToHideContainer.push([key,projectCard.id]);

}
}
}
else if(token === "OR"){
let searchRegex= new RegExp(nextToken,'gi');
else {
let searchRegex= new RegExp(token,'gi');
let noMatchDataset=0;
for(const [key,value] of Object.entries(projectCardObj)){
if( value.filter(x => searchRegex.test(x) ).length > 0){
cardsToHideContainer.pop();
projectCard.style.display = 'list-item' ;
if( value.filter(x => searchRegex.test(x) ).length == 0){
noMatchDataset++;
if(noMatchDataset==5){cardsToHideContainer.push([key,projectCard.id]);}
}
else{
projectCard.style.display = 'list-item' ;
break;
}
}
}

i++;
}
else if(token.includes("-")){
let searchToken=token.substr(1);
let searchRegex= new RegExp(searchToken,'gi');
let noMatchDataset=0;
for(const [key,value] of Object.entries(projectCardObj)){
if( value.filter(x => searchRegex.test(x) ).length > 0){

cardsToHideContainer.push([key,projectCard.id]);

}
}
}
}
else {
let searchRegex= new RegExp(token,'gi');
let noMatchDataset=0;
for(const [key,value] of Object.entries(projectCardObj)){
if( value.filter(x => searchRegex.test(x) ).length == 0){
noMatchDataset++;
if(noMatchDataset==5){cardsToHideContainer.push([key,projectCard.id]);}
}
else{
projectCard.style.display = 'list-item' ;
break;
}
}
}
}

if (cardsToHideContainer.length > 0) {
break;
}
}
}

if (cardsToHideContainer.length > 0){
cardsToHideContainer.map(item => document.getElementById(`${item[1]}`).style.display = 'none');
break;
Expand Down
Loading