過濾數據客戶端：比較CSS，jQuery和React

假設您有一個包含100個名稱的列表：

<code></code>

• Randy Hilpert
• Peggie Jacobi
• Ethelyn Nolan Sr.

……或者文件名、電話號碼等等。您想在客戶端對它們進行過濾，這意味著您不會發出服務器端請求來搜索數據並返回結果。您只想鍵入“rand”，並讓它過濾列表以包含“Randy Hilpert”和“Danika Randall”，因為它們都包含該字符串。其他所有內容都不包含在結果中。

讓我們看看如何使用不同的技術來實現這一點。

CSS 可以做到，但需要一點幫助。

CSS 無法根據其包含的內容來選擇項目，但它可以根據屬性及其值進行選擇。因此，讓我們也將名稱移入屬性中。

<code></code>

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

現在，要過濾包含“rand”的名稱列表，非常容易：

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

請注意第4 行的i。這意味著“不區分大小寫”，在這裡非常有用。

為了使這個過濾器能夠動態工作，我們需要使用JavaScript 不僅要響應過濾器的輸入，還要生成與搜索內容匹配的CSS。

假設我們在頁面上有一個塊：

<style id="cssFilter">
  /* 动态生成的 CSS 将放在这里 */
  </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 來實現這一點有點奇怪，但如果您對這個概念感興趣，Tim Carry 曾將其進一步發展。

jQuery 使其變得更容易。

由於我們無論如何都需要JavaScript，因此jQuery 可能是一個可接受的工具。這裡有兩個值得注意的變化：

• jQuery可以根據其包含的內容選擇項目。它有一個專門用於此的selector 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 可以使用狀態和渲染來僅渲染它需要的內容。

在React 中沒有一種正確的方法來實現這一點，但我認為將名稱列表作為數據（如數組）保留，遍歷它們，並且只渲染您需要的內容是React 式的。輸入中的更改會過濾數據本身，React 會根據需要重新渲染。

如果我們有names = [array, of, names]，我們可以很容易地過濾它：

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

這次，不區分大小寫可以這樣完成：

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

然後，我們將在JSX 中執行典型的.map() 操作來遍歷我們的數組並輸出名稱。

我沒有任何特別的偏好

這不是您選擇技術的那種事情。您可以在您已經擁有的任何技術中完成它。我認為就技術債務而言，任何一種方法都不比其他方法更重。

以上是過濾數據客戶端：比較CSS，jQuery和React的詳細內容。更多資訊請關注PHP中文網其他相關文章！