Client-side full-text search in CSS

How do we design, develop, and run websites and web applications today? A blog by François Zaninotto Using data- attributes for indexation, and a dynamic stylesheet with a CSS3 selector for search, it is straightforward to implement a client-side full-text search in CSS rather than JavaScript. Here is an example. The Searchable List The Search Code The search is very straightforward: it relies on

[AmaiSaeta]

検索対象文字列を連結したdata-index属性を予め作っておいて、 :not([data-index*="～"]) { display: none; } で対象外を消すと……うーん、微妙じゃね。例えば"m1"で検索したら微妙さがよく分かる。

[kozy4324]

css3のセレクターで全文検索っぽいこと. ただしこの例だとCSS injectionできてまう

[tachesimazzoca]

Genius, but one of the CSS tricks :) It uses `data-` attribute and `:not([attr*=(keyword)])` CSS selector

[nibushibu]

クライアントサイドで全文検索

[o_hiroyuki]

cssを使った検索

[Kureduki_Maari]

Client-side full-text search in CSS

[june29]

CSSセレクタで表示要素の絞り込みをしてインクリメンタル検索UIっぽいものを。実用的かどうかは置いておいて、こういう手段もありか、と。

[side_tana]

ヤバイ

[typista]

Client-side full-text search in CSS

[wakuworks]

CSS を使った全文検索。検索対象にインデックスを用意し、検索ワードが含まれているかどうかで表示非表示を切り替えている。

[stakaya]

CSSをつかったクライアントサイド全文検索の仕組み。

[saladdays]

jsでのでリアルタイム検索

[riywo]

おもしろい

[ito-pt]

検索

[atsushi1972]

Client-side full-text search in CSS Using data- attributes for indexation, and a dynamic stylesheet with a CSS3 selector for search, it is straightforward to implement a client-side full-text search in CSS rather than JavaScript. Here is an example. [] via Pocket September 12, 2013 at 09:24AM

[akymrk]

:not()と属性セレクタを組み合わせたスタイルをオンザフライで生成し、表示／非表示を適用。[data-index='...']の...はinput[type="text"]の入力をとってくる、随時取得は、"input"イベント発火時に取れる。jsでcss作る

[tmatsuu]

CSS(not JavaScript)で全文検索エンジンとか誰得

[Yamashiro0217]

すげぇ…

[hasegawayosuke]

css selectorをつかった検索

[sho]

全文検索というよりは絞り込みの手法。そこそこ小規模なデータならアリか。

[blue1st]

参考になる

[moongift]

CSSで検索