乐趣区

客户端过滤数据比较CSSjQuery和React

假设您有 100 个名字的列表:

<ul>
  <li>Randy Hilpert</li>
  <li>Peggie Jacobi</li>
  <li>Ethelyn Nolan Sr.</li> 
  <!-- and then some -->
</ul>

… 或文件名或电话号码,等等。而且您想在客户端过滤它们,这意味着您没有在服务器端请求搜索数据并返回结果。您只想输入“rand”并使其过滤列表以包括“Randy Hilpert”和“Danika Randall”,因为它们中都包含该字符串。其他所有内容均未包含在结果中。

让我们看看如何使用不同的技术来做到这一点。

CSS 可以八九不离十做到这一点

CSS 不能根据它们包含的内容来选择项目,但是可以根据属性和这些属性的值进行选择(利用 CSS 的属性选择器)。因此,我们也将名称移动到属性中。

<ul>
  <li data-name="Randy Hilpert">Randy Hilpert</li>
  <li data-name="Peggie Jacobi">Peggie Jacobi</li>
  <li data-name="Ethelyn Nolan Sr.">Ethelyn Nolan Sr.</li> 
  ...
</ul>

现在要过滤包含“rand”的名称的列表,非常简单:

li {display: none;}

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

注意第 5 行的字母“i”。这表示“不区分大小写”,在这里非常有用。

为了使此动态化,我们将与 input 过滤器一起工作,我们需要使 JavaScript 不仅对键入的过滤器做出反应,而且还要生成与要搜索的内容匹配的 CSS。

假设我们 style 在页面上有一个方块:

<style id="cssFilter">
  /* dynamically generated CSS will be put in here */
</style>

我们可以监听过滤器输入的更改并生成该 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;
});

请注意,当过滤器为空时,我们将清空样式块,因此所有结果都会显示出来。

我承认利用 CSS 做到这一点很奇怪。

jQuery 使得它更容易

既然我们仍然需要 JavaScript,也许 jQuery 是可以接受的工具。这里有两个值得注意的变化:

  • jQuery 可以根据项目包含的内容来选择项目。为此,它具有选择器 API。我们不再需要多余的属性。
  • 这将所有过滤保持在一种技术上。

我们仍然会监听输入内容的输入,然后,如果我们有过滤条件,我们将隐藏所有列表项,并显示包含过滤条件的项。否则,我们将再次显示所有内容:

const listItems = $("li");

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

使过滤器不区分大小写比 CSS 更加费事,但是我们可以通过覆盖默认方法来做到这一点:

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

在 React 中可以使用状态跟 Filter 函数做到这一点

在 React 中没有做到这一点的真正方法,但我认为将名称列表保留为数据(如 Array),映射它们并仅呈现所需内容是 React-y。输入中的更改会过滤数据本身,并在需要时重新渲染 React。

如果有一个 names = [array, of, names],我们可以很容易地对其进行过滤:

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

这次,可以这样区分大小写:

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

然后,我们将执行.map()JSX 中的典型操作来遍历数组并输出名称。

我没有任何特别的偏好

这不是您选择技术的目的。您可以使用现有技术进行操作。我也不认为任何一种方法在技术债务方面都比其他方法特别重。

退出移动版