クライアントフィルタデータ:CSS,jQuery,Reactの比較

名前のリストが100個あるとします.

  
Randy Hilpert
  
Peggie Jacobi
  
Ethelyn Nolan Sr.
 
  

...ファイル名や電話番号などです.また、クライアントでフィルタリングしたい場合は、サーバ側でデータの検索を要求して結果を返さないことを意味します.文字列が含まれているため、「rand」を入力してリストをフィルタして「Randy Hilpert」と「Danika Randall」を含めるだけです.その他のすべてのコンテンツは結果に含まれていません.
異なるテクノロジーをどのように使用するかを見てみましょう.

CSSは十中八九でこの点をやり遂げることができる。

CSSは、それらに含まれる内容に基づいてアイテムを選択することはできませんが、属性とこれらの属性の値に基づいて選択できます(CSSの属性セレクタを使用します).したがって、名前もプロパティに移動します.

  
Randy Hilpert
  
Peggie Jacobi
  
Ethelyn Nolan Sr.
 
  ...

「rand」という名前のリストをフィルタするのは簡単です.

li {
  display: none;
}

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

5行目のアルファベット「i」に注意してください.これは「大文字と小文字を区別しない」という意味で、ここでとても役に立ちます.
これを動的にするには、inputフィルタと一緒に作業し、JavaScriptが入力したフィルタに反応するだけでなく、検索するコンテンツに一致する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を利用してこれを行うのはおかしいと認めます.

jQueryはより簡単に

JavaScriptがまだ必要である以上、jQueryは受け入れられるツールかもしれません.ここには2つの注意すべき変化があります.

jQueryは、プロジェクトに含まれる内容に応じてプロジェクトを選択することができる.このため、セレクタAPIがあります.余分なプロパティは必要ありません.

これは、すべてのフィルタリングを1つの技術に保持する.

入力内容の入力をリスニングし、フィルタ条件がある場合は、すべてのリスト項目を非表示にし、フィルタ条件が含まれている項目を表示します.それ以外の場合は、すべてのコンテンツを再度表示します.

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の一般的な操作は、配列を巡回し、名前を出力します.

私には特別な好みはありません。

これは、テクノロジーを選択する目的ではありません.既存のテクノロジーを使用して操作できます.私もどの方法も技術債務の面で他の方法より特に重いとは思いません.