背景
実際、私は長い間サイトの検索をするように頼まれてきました。 もちろん、そこには探すべきものはほとんどありませんが、近い将来にどれほど傷つくのか。 検索用の新しいユニットを追加する計画。 私が研究していないこの霧のようなalbion SQLは、その謎に驚いた。 しかし、データを保存するファイルにはありません。 やめて、どうして？ JavaScriptを使用して検索して制作します。 検索用のデータをスクリプトなどに読み込むことができると思いました。 このアイデアは私に感染し、私が書き始めたとき、私は考えました：「なぜこれを複雑にするのですか？ すべてをページ上に置くと、特性に合わないアイテムは単純に非表示になります。 同時に、検索エンジンのページにはすべての結果が表示されます。 ユーザーはすべてのデータを一度に利用でき、サーバーから自律的に選択する場合にのみ残ります。 ページを圧縮して、キャッシュに永久に保存できます。
物語
HTML
新しいHTMLファイルを作成し、実験を開始しました。 追加された選択：
< select id = "style" onchange = "filter_changed（）" >
< オプション 値 = "" >スタイル： < / / オプション >
< オプション >新古典主義< / / オプション >
< オプション >ポストモダン< / / オプション >
< オプション >擬似モダン< / / オプション >
< オプション >ネオゴシック< / / オプション >
< / 選択 >
データを含むdivを追加しました：
< div class = "home whiteframe" >
<a class = "url" href = "kirpich.example.com/#rust">
< img class = "image" src = " kirpich.example.com/thmb/rust/rust_vid-1.jpg" / >
</a>
< div class = "name" >
<a class = "url" href = "kirpich.example.com/#rust">
「錆」
</a>
< / div >
< div class = "style" >新古典主義< / / div >
< div class = "wall_material" >ミネラルウールで断熱されたセラミックレンガ< / / div >
< div class = "square" > 165.5 < / / div >
< div class = "living_space" > 86 < / / div >
< div class = "floors" > 2 < / / div >
< / div >
何を選択してください。 そこからもあります。 今、それは何をするために残っています。
Javascript
JSファイルを作成しました。
したがって、最初に行う必要があるのは、すべてのポイントを処理することです。 簡単です：
関数 filter_changed （ ） {
var list = document。 getElementsByClassName （ "home" ） ;
for （ var i = 0 ; i <リストの長さ ; i ++ ）
hide （ list [ i ] 、 is_filtred （ list [ i ] ） ）） ;
}
次に、このアイテムが特定の特性に適しているかどうかを判断する必要があります。
関数 is_filtred （ node ） {
if （ no_text （ node 、 "style" ） ） trueを 返し ます 。
}
関数 no_text （ node 、 filter ） {
var style_filter = get （ document。getElementById （ filter ） 、 [ "value" ] ） ;
var home_style = get （ node。getElementsByClassName （ filter ） 、 [ 0 、 "textContent" ] ） ;
if （ style_filter && （ ！ home_style || （ home_style。indexOf （ style_filter ） < 0 ） ） ））
trueを 返し ます 。
}
特定の特性が見つからない場合、要素は非表示になります。
関数 hide （ node 、 h ） {
ノード。 スタイル 。 ディスプレイ = h ？ "none" ： "block" ;
}
だから これは対処されました。 しかし、リストで尋ねることができない数量はまだあります。 それらのフィルターを作成します。
関数 is_filtred （ node ） {
if （ no_text （ node 、 "style" ） ） trueを 返し ます 。
if （ compare （ node 、 "square" ） ） trueを 返し ます 。
}
関数 compare （ node 、 filter 、 comparer ） {
var square_filter = get （ document。getElementById （ filter ） 、 [ "value" ] ） ;
var home_square = get （ node。getElementsByClassName （ filter ）） [[ 0 、 "textContent" ] ） ;
if （ square_filter && ！ home_square ）
trueを 返し ます 。
else if （ square_filter && home_square ） {
square_filter = parseFloat （ square_filter ）
home_square = parseFloat （ home_square ）
if （ （ ！ comparer || comparer == ">" ） ？ square_filter > home_square ： comparer == "<" ？ square_filter < home_square ： comparer == "=" ？ square_filter ！= home_square ： false ）
trueを 返し ます 。
}
}
まあ、それだけです。 そうそう。 これはどのようなものですか？
function get （ node 、 keys ） {
for （ var i = 0 ; （ i < keys。length ） && node ; i ++ ）
node = node [ keys [ i ] ] ;
戻りノード
}
要素またはそのプロパティが見つからない場合、エラーを防ぎます。
CSS
HTMLにはベアデータがあり、ユーザーが何を見ているかをユーザーに理解させる必要があるため、このような行をCSSに追加します。
.name :: before {
内容 ： "タイトル：" ;
色 ： グレー ;
}
.style :: before {
内容 ： "スタイル：" ;
色 ： グレー ;
}
.wall_material :: before {
内容 ： "壁の素材：" ;
色 ： グレー ;
}
.square :: before {
内容 ： 「総面積：」 ;
色 ： グレー ;
}
.square :: after 、 .living_space :: after {
内容 ： 「sqm」 ;
色 ： グレー ;
}
.floors :: before {
内容 ： "フロア：" ;
色 ： グレー ;
}
.living_space :: before {
内容 ： "リビングエリア：" ;
色 ： グレー ;
}
このデータはセカンダリであるため、このテキストをグレーに設定することで、本当に意味のあるコンテンツを前面に出します。
おわりに
シンプルで、うまくいけば高速です。 数百万のリストではなく、少量のデータで処理できます。 さて、私にとってはプラスです-内容は単純なので、他の人の肩にコンテンツをシフトできます。
続き：
CSS 2でHTML 2を検索する