ホームページ内に商品検索機能を付ける方法を教えて
ヒントになりそうな質問/回答はいくつかあったのですが、
目的に合致したものがなかったため、新規で質問させていただきます。
＜概要＞
この度、ショップのwebサイトを構築しようとしています。
サイト上に掲載している各商品を、指定の条件で検索し、
その結果を指定の場所(ページ)に反映させる機能を実装したいです。
イメージとしては、多々あるオンラインショップ（楽天市場やZOZOTOWNなど）のような。
＜質問＞
1.検索機能について
具体的には
「10,000円以下の商品」検索ボタン
10,000円以下の商品が3個、10,000円以上の商品が5個あったとします。
当該の検索ボタンをクリックすると、10,000円以下の商品3個だけが
検索結果として、商品掲載ページに表示される。
「色:赤」に該当する商品」検索ボタン
「赤」の印が付いた商品が5個、「青」の印が付いた商品が10個あったとします。
当該の検索ボタンをクリックすると、「赤」の印が付いた商品5個のみが
検索結果として、商品掲載ページに表示される。
といった機能を実装したいです。
そもそも何をどうすればいいのかを理解してません。
どのようにして実現するのでしょうか？（有償サービス？プログラム？）
具体的な方法ないしはサンプルなどの情報があれば教えて頂きたいです。
2.検索結果の表示について
以下のような1枚の.htmlがあった場合、
Bの＜div＞内に検索フォームやボタンを設定したとして
そこで実行した結果が、Cに反映させるという動きが良いです。
（多くのサイトで実装している機能がそういう仕組みだと思っての事です…違うのでしょうか。。）
「￣￣￣￣￣￣￣￣￣￣￣￣￣￣ |
| A ｜
|￣￣￣￣|￣￣￣￣￣￣￣￣￣￣|
| | |
| | |
| B | C |
| | |
| | |
| | |
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
＜補足＞
・商品の数は10,000点以上です
・html5、CSS3は多少の理解があります
・ホームページ作成ソフトは特に使ってません。エディタで直接
以上よろしくお願いいたします。
お礼
ご回答ありがとうございました！