Filtering Data Client-Side: Comparing CSS, jQuery, and React

Suppose you have a list of 100 names:

<code></code>

• Randy Hilpert
• Peggie Jacobi
• Ethelyn Nolan Sr.

...or file name, phone number, etc. You want to filter them on the client side, which means you don't issue server-side requests to search for data and return results. You just want to type "rand" and let it filter the list to include "Randy Hilpert" and "Danika Randall" because they both contain the string. Everything else is not included in the results.

Let's see how to achieve this using different techniques.

CSS can do it, but it needs a little help.

CSS cannot select items based on what it contains, but it can be selected based on attributes and their values. So let's move the name into the attribute as well.

<code></code>

• Randy Hilpert
• Peggie Jacobi
• Ethelyn Nolan Sr. ...

Now, to filter a list of names containing "rand" is very easy:

 li {
  display: none;
}
li[data-name*="rand" i] {
  display: list-item;
}

Please note the i in line 4. This means "case insensitive" and is very useful here.

In order for this filter to work dynamically, we need to use JavaScript to not only respond to the input of the filter, but also generate CSS that matches the search content.

Suppose we have a block on the page:

<style id="cssFilter">
  /* 动态生成的 CSS 将放在这里 */
  </style>

We can monitor changes in filter input and generate this CSS:

 filterElement.addEventListener("input", e => {
  let filter = e.target.value;
  let css = filter ? `
    li {
      display: none;
    }
    li[data-name*="${filter}" i] {
      display: list-item;
    }
  ` : ``;
  window.cssFilter.innerHTML = css;
});

Note that when the filter is empty we clear the style block, so all results are displayed.

I admit that it's a bit weird to use CSS to achieve this, but if you're interested in this concept, Tim Carry has taken it further.

jQuery makes it easier.

Since we need JavaScript anyway, jQuery may be an acceptable tool. Here are two notable changes:

• jQuery can select items based on what it contains. It has a selector API dedicated to this. We no longer need additional attributes.
• This keeps all filtering operations in a single technique.

We still monitor the input typing, and then if we have a filter term, we hide all list items and display the list items containing our filter term. Otherwise, we display all list items again:

 const listItems = $("li");

$("#filter").on("input", function() {
  let filter = $(this).val();
  if (filter) {
    listItems.hide();
    $(`li:contains('${filter}')`).show();
  } else {
    listItems.show();
  }
});

Making filters case-insensitive requires more operations than CSS, but we can do this by overriding the default method:

 jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

React can use state and rendering to render only what it needs.

There is not a correct way to achieve this in React, but I think it is React-like to keep the name list as data (like arrays), iterate over them, and just render what you need. Changes in the input filter the data itself and React re-renders as needed.

If we have names = [array, of, names], we can filter it easily:

 filteredNames = names.filter(name => {
  return name.includes(filter);
});

This time, it can be done insensitively:

 filteredNames = names.filter(name => {
  return name.toUpperCase().includes(filter.toUpperCase());
});

We will then perform a typical .map() operation in JSX to iterate through our array and output the name.

I don't have any special preferences

This is not the kind of thing you choose technology. You can do it in any technology you already have. I don't think either approach is heavier than the others in terms of technical debt.

The above is the detailed content of Filtering Data Client-Side: Comparing CSS, jQuery, and React. For more information, please follow other related articles on the PHP Chinese website!