Guide to setting up a search function with class name filtering

Question

Guide to setting up a search function with class name filtering

I am currently managing a website with multiple items, each represented by individual div elements. While all items share one common class name, they also have several other class names serving as tags to differentiate them (some tags may overlap between different items).

On the website, I have buttons set up using data-filter=".exampleclass" and data-filter=".exampleclass2", which effectively sort the items based on their class names. Now, I am exploring the idea of implementing a search bar where users can input a class name directly, eliminating the need for separate sorting buttons.

document.getElementById("boxsearch").oninput = function() {
  var matcher = new RegExp(document.getElementById("boxsearch").value, "gi");
  for (var i = 0; i < document.getElementsByClassName("portfolio-item").length; i++) {
    if (matcher.test(document.getElementsByClassName("category")[i])) {
      document.getElementsByClassName("portfolio-item")[i].style.display = "inline-block";
    } else {
      document.getElementsByClassName("portfolio-item")[i].style.display = "none";
    }
  }
}

Click here for an example in JSFiddle

Currently, I do not have the jQuery file included, so the buttons are not functioning properly. However, they work fine on my end. I just need guidance on how to enable the search functionality to filter items by their class names.

While researching, I found a similar concept that aligns with my goals: View the example here

javascript html css

Answer 1

Answer №1

Filtering elements based on regular expression matches with one of their class names can be inefficient. It is recommended to build an index and utilize a more optimized search algorithm for filtering elements.

An alternative approach involves using a single class to select the desired elements, iterating over them, accessing their classList, and then searching for matches. However, this method may inadvertently test other unrelated class names for filtering or sorting purposes.

A more effective solution could be to incorporate filter and sorting values as data- attributes to distinguish them from other factors. Additionally, creating an index of target elements allows for efficient retrieval and manipulation of specific elements.

Repeated calls to getElementByClassName can be costly and redundant, especially within a loop. The provided example demonstrates calling this function multiple times per keyup event.

function filterOnClass(baseClass, s) {
  let re = new RegExp(s.trim(), 'i');
  document.querySelectorAll('.' + baseClass).forEach(node => {
    let cNames = Array.from(node.classList);
    // Show all if search string is blank
    if (s.trim() == '') {
      node.classList.remove('hide');
    // Otherwise, filter 
    } else if (cNames.some(cName => re.test(cName))) {
        node.classList.add('hide');
    } else {
      node.classList.remove('hide');
    }
  });  
}

.box {
  height: 50px;
  width: 100px;
  border: 1px solid blue;
}

.hide {
  display: none;
}

<input id="searchInput" onkeyup="filterOnClass('box', this.value)"><br>
<div class="box foo">foo</div>
<div class="box foo bar">foo bar</div>
<div class="box fum bar">fum bar</div>
<div class="box fum">fum</div>

Answer 2

Filtering elements based on regular expression matches with one of their class names can be inefficient. It is recommended to build an index and utilize a more optimized search algorithm for filtering elements.

An alternative approach involves using a single class to select the desired elements, iterating over them, accessing their classList, and then searching for matches. However, this method may inadvertently test other unrelated class names for filtering or sorting purposes.

A more effective solution could be to incorporate filter and sorting values as data- attributes to distinguish them from other factors. Additionally, creating an index of target elements allows for efficient retrieval and manipulation of specific elements.

Repeated calls to getElementByClassName can be costly and redundant, especially within a loop. The provided example demonstrates calling this function multiple times per keyup event.

function filterOnClass(baseClass, s) {
  let re = new RegExp(s.trim(), 'i');
  document.querySelectorAll('.' + baseClass).forEach(node => {
    let cNames = Array.from(node.classList);
    // Show all if search string is blank
    if (s.trim() == '') {
      node.classList.remove('hide');
    // Otherwise, filter 
    } else if (cNames.some(cName => re.test(cName))) {
        node.classList.add('hide');
    } else {
      node.classList.remove('hide');
    }
  });  
}

.box {
  height: 50px;
  width: 100px;
  border: 1px solid blue;
}

.hide {
  display: none;
}

<input id="searchInput" onkeyup="filterOnClass('box', this.value)"><br>
<div class="box foo">foo</div>
<div class="box foo bar">foo bar</div>
<div class="box fum bar">fum bar</div>
<div class="box fum">fum</div>

Guide to setting up a search function with class name filtering

Answer №1

Similar questions

Issues with displaying form/button glyphicon when using a fixed table header in Bootstrap

What steps can be taken to troubleshoot an AJAX error that does not display any error messages?

What is the best way to call upon a necessary module from various files?

Executing Cross-Component Communication in Angular 7: A Quick Guide

What is the best way to simulate DynamoDB promise functionality with Jest?

Exploring the dynamic duo of Django and DataTables: a guide on incorporating

Tips for adjusting the dimensions of my chart using JavaScript or Jquery

Encountering difficulties accessing props while invoking a component in React

Guide to altering JSON using Javascript

:after pseudo class not functioning properly when included in stylesheet and imported into React

"Using a triangular background shape in JavaScript instead of a traditional circular

Rearranging the order of Div elements within a main container using JavaScript DOM manipulation

Creating a Modal in React without the need for a button to trigger it

Unable to cancel $interval within factory

Refresh cloned element after making changes to the original element

Google Maps and certain styles may require the browser to be refreshed multiple times

Retrieve the current element's 'this' object even after binding an external 'this' object

One controller, divergent template, introducing a fresh variable

What is the method for checking the pathname condition?

Refreshing a PNG file without the need to refresh the entire page