假設(shè)您有一個包含100個名稱的列表：

<code></code>

• Randy Hilpert
• Peggie Jacobi
• Ethelyn Nolan Sr.

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

讓我們看看如何使用不同的技術(shù)來實現(xiàn)這一點。

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

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

<code></code>

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

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

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

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

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

假設(shè)我們在頁面上有一個塊：

  <style id="cssFilter">
  /* 動態(tài)生成的 CSS 將放在這里 */
  </style>

我們可以監(jiān)視過濾器輸入的變化并生成該 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;
});

請注意，當過濾器為空時，我們清空樣式塊，因此顯示所有結(jié)果。

我承認利用 CSS 來實現(xiàn)這一點有點奇怪，但如果您對這個概念感興趣，Tim Carry 曾將其進一步發(fā)展。

jQuery 使其變得更容易。

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

• jQuery 可以根據(jù)其包含的內(nèi)容選擇項目。它有一個專門用于此的 selector API。我們不再需要額外的屬性。
• 這將所有過濾操作都保留在單一技術(shù)中。

我們?nèi)匀槐O(jiān)視輸入的鍵入，然后如果我們有一個過濾器術(shù)語，我們隱藏所有列表項并顯示包含我們的過濾器術(shù)語的列表項。否則，我們再次顯示所有列表項：

const listItems = $("li");

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

與 CSS 相比，使過濾器不區(qū)分大小寫需要更多操作，但我們可以通過覆蓋默認方法來實現(xiàn)：

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

React 可以使用狀態(tài)和渲染來僅渲染它需要的內(nèi)容。

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

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

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

這次，不區(qū)分大小寫可以這樣完成：

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

然后，我們將在 JSX 中執(zhí)行典型的 .map() 操作來遍歷我們的數(shù)組并輸出名稱。

我沒有任何特別的偏好

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

以上是過濾數(shù)據(jù)客戶端：比較CSS，jQuery和React的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！