- ベストアンサー
サイト内の物件を検索条件で絞り込む方法
- JavaScriptを使用して、サイト内の物件を複数の検索条件で絞り込む方法を紹介します。
- 具体的には、ドロップダウン形式の検索条件を使用して、物件種別や地域、価格などの条件で絞り込むことができます。
- 選択した条件に該当する物件が絞り込まれ、ユーザーが指定した条件に合致する物件のみ表示されます。
- tekkenman7
- お礼率70% (150/212)
- JavaScript
- 回答数10
- ありがとう数7
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
しつもんしゃさんがじぶんでかいておいた、div#kensaku ようそをかってにけすからうごかないのさ。 もじすうせいげんがあるから、みじかくかいたために、りかいしにくいですね。では！ <!DOCTYPE html> <html lang="ja"> <head> <title>Test</title> <meta charset="utf-8"> <style> #BUKKEN, #BUKKEN ol { list-style :none; margin: 1em 0; padding : 0; } #BUKKEN li > ol > li:nth-of-type(1) { border-bottom : 2px blue solid; font-size: x-large; width:200px; color:#080; margin-bottom: 1ex; } #BUKKEN li > ol > li:nth-of-type(4) { color : red; } #BUKKEN li > ol > li:nth-of-type(6) > img { border : 1px green solid; width: 200px; height:80px; } #kensaku { border : 1px green solid; width: 600px; } </style> </head> <body> <div id="kensaku"> <form action="#"> <ol> <li> 物件種別: <select name="sel_type"> <option value=""> <option value="売地">売地 <option value="新築住宅">新築住宅 <option value="中古住宅">中古住宅 <option value="マンション">マンション </select> <li> 市町村: <select name="sel_adr"> <option value=""> <option value="横浜市">横浜市 <option value="鶴見区">鶴見区 <option value="神奈川区">神奈川区 <option value="西区">西区 </select> <li> 価格: <select name="sel_kakaku"> <option value=""> <option value="0,500">500万未満 <option value="500,1000">500万以上1000万未満 <option value="1000,1500">1000万以上1500万未満 </select> </ol> <p> <input type="reset" onclick="allDisp()"> <img src="sample.jpg" onclick="find2()" alt="検索ボタン"> </p> </form> </div> <ul id="BUKKEN"> <li> <ol> <li>物件1 <li>場所：神奈川県横浜市 <li>物件種別：売地 <li>価格：400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>お勧め物件です。 </ol> </li> <li> <ol> <li>物件48 <li>場所：神奈川県西区 <li>物件種別：マンション <li>価格：1400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>なにより見えない人には、格安物件です </ol> </li> </ul> <script> function find (_, n) { var e = this; var d = this.ownerDocument; var v = e.value; var r, l; if (v && n) { l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')'); switch (n) { case 2 : case 3 : r = Array.prototype.filter.call (l, function (e) { return this.test (e.textContent) }, new RegExp (v)); break; case 4: //case4は価格 var t = v.split (','); //varの追加 r = Array.prototype.filter.call (l, function (e) { var n, m; if (n = e.textContent.match (/(\d+)/)) { m = +n[1]; if (this.min <= m && m < this.max) { return true; } } }, {min: +t[0], max: +t[1]}); break; } if (r) Array.prototype.forEach.call (d.querySelectorAll ('#BUKKEN > li'), function (e) { if (-1 == this.indexOf (e)) e.style.display = 'none'; }, r.map (function (e) { return e.parentNode.parentNode; })); } } function find2 () { allDisp (); [3,2,4].forEach ( function (n, i) { find.call (this[i], null, n); }, document.querySelectorAll ('#kensaku select[name^="sel_"]') ); } function allDisp () { Array.prototype.forEach.call ( document.querySelectorAll ('#BUKKEN > li'), function (e) { e.style.display = 'list-item'; } ); } </script>
その他の回答 (9)
- babu_baboo
- ベストアンサー率51% (268/525)
なんでもかんでもスクリプトでおこなうのは、たやすいことですが、ぐげんします。 ぶっけんりすとのさいご（けんさくにさゆうされない）に、 「お探しの物件は見つかりませんでしたか？物件が表示されない場合は、条件を換えてもう一度検索してみてください。」のように、どちらともとれるひょうげんにするとか・・・ さいしょのせっけいとはちがい、つけやきばのついかしょりのれんぞくなので、あとだしでいわれると・・・ もうすでに、「なんだこれ？」れべるのコードになっています。 それと、innerHTML でかきかえてはいけません。なぜならぶっけんりすとがすべてきえてしまいます たのかたのいけんもとりいれて、あらためてしつもんなさってはどうでしょう？ もうだれものぞきつづけていないでしょうし。
お礼
いろいろとありがとうございました。 とても助かりました。 教えて頂いたコードを使わせて頂きます。 より良いものになるよう他の方の意見も参考にしたいと思います。
- babu_baboo
- ベストアンサー率51% (268/525)
できれば、ていせいを。 「わけありですが、鈍感であれば見えません。」ではなく、 「なにより見えない人には、格安物件です」にするべきだったと。
- babu_baboo
- ベストアンサー率51% (268/525)
う～ん、なんだかな～。（ださくになるよ？） まず、select ようその、onchange のたぐいのものをさくじょして、 img ようそに、onclick="find2()" でも、はりつけて、 e.disabled = true; をさくじょする function find2 () { allDisp (); [3,2,4].forEach ( function (n, i) { find.call (this[i], null, n); }, document.querySelectorAll ('#kensaku select[name^="sel_"]') ); } function allDisp () { Array.prototype.forEach.call ( document.querySelectorAll ('#BUKKEN > li'), function (e) { e.style.display = 'list-item'; } ); } いまみなおすと、おすすめできるこーどでは、なさそうなのだけど・・・
お礼
ありがとうございます。 教えてもらったようにやってみましたが 動作しませんでした。 一番下にその修正をのせてあります。 自分なりにあれこれいじり、 function find (_, n) { var e = t ～～～ .parentNode; })); } } を消してみて imgの部分を押すとブラウザの検索窓が開き、 キャンセルを３回押さないと閉じない状態になってしまったので、 今度は、削除したselectのonchangeを戻すと、 各選択の部分を押すと直ちに検索が開始され、 imgを押すと選択部分のテキストはそのままに 全ての物件が表示されたりしました。 いろいろ試しましたが実現しませんでした。 お手数をおかけしますが、 また教えて頂けないでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> <title>Test</title> <meta charset="utf-8"> <style> #BUKKEN, #BUKKEN ol { list-style :none; margin: 1em 0; padding : 0; } #BUKKEN li > ol > li:nth-of-type(1) { border-bottom : 2px blue solid; font-size: x-large; width:200px; color:#080; margin-bottom: 1ex; } #BUKKEN li > ol > li:nth-of-type(4) { color : red; } #BUKKEN li > ol > li:nth-of-type(6) > img { border : 1px green solid; width: 200px; height:80px; } </style> </head> <body> <h1>あんぱんまんけんた君 検索するＺ～！</h1> <form action="#"> <ol> <li> 物件種別: <select name="sel_type"> <option value=""> <option value="売地">売地 <option value="新築住宅">新築住宅 <option value="中古住宅">中古住宅 <option value="マンション">マンション </select> <li> 市町村: <select name="sel_adr"> <option value=""> <option value="横浜市">横浜市 <option value="鶴見区">鶴見区 <option value="神奈川区">神奈川区 <option value="西区">西区 </select> <li> 価格: <select name="sel_kakaku"> <option value=""> <option value="0,500">500万未満 <option value="500,1000">500万以上1000万未満 <option value="1000,1500">1000万以上1500万未満 </select> </ol> </form> <img src="" alt="検索" onclick="find2()" /> <ul id="BUKKEN"> <li> <ol> <li>物件1 <li>場所：神奈川県横浜市 <li>物件種別：売地 <li>価格：400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>お勧め物件です。 </ol> </li> <li> <ol> <li>物件48 <li>場所：神奈川県西区 <li>物件種別：マンション <li>価格：1400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>なにより見えない人には、格安物件です </ol> </li> </ul> <script> function find (_, n) { var e = this; var d = this.ownerDocument; var v = e.value; var r, l; if (v && n) { l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')'); switch (n) { case 2 : case 3 : r = Array.prototype.filter.call (l, function (e) { return this.test (e.textContent) }, new RegExp (v)); break; case 4: t = v.split (','); r = Array.prototype.filter.call (l, function (e) { var n, m; if (n = e.textContent.match (/(\d+)/)) { m = +n[1]; if (this.min <= m && m < this.max) { return true; } } }, {min: +t[0], max: +t[1]}); break; } if (r) Array.prototype.forEach.call (d.querySelectorAll ('#BUKKEN > li'), function (e) { if (-1 == this.indexOf (e)) e.style.display = 'none'; }, r.map (function (e) { return e.parentNode.parentNode; })); } } function find2 () { allDisp (); [3,2,4].forEach ( function (n, i) { find.call (this[i], null, n); }, document.querySelectorAll ('#kensaku select[name^="sel_"]') ); } function allDisp () { Array.prototype.forEach.call ( document.querySelectorAll ('#BUKKEN > li'), function (e) { e.style.display = 'list-item'; } ); } </script> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
ごめんなさい。ていせいです。 へんすう t が、グローバルでした。 var でもつけてください。
- babu_baboo
- ベストアンサー率51% (268/525)
あたらしめのぶらうざで。ぜんかくくうはくははんかくに。 <!DOCTYPE html> <html lang="ja"> <head> <title>Test</title> <meta charset="utf-8"> <style> #BUKKEN, #BUKKEN ol { list-style :none; margin: 1em 0; padding : 0; } #BUKKEN li > ol > li:nth-of-type(1) { border-bottom : 2px blue solid; font-size: x-large; width:200px; color:#080; margin-bottom: 1ex; } #BUKKEN li > ol > li:nth-of-type(4) { color : red; } #BUKKEN li > ol > li:nth-of-type(6) > img { border : 1px green solid; width: 200px; height:80px; } </style> </head> <body> <h1>あんぱんまんけんた君 検索するＺ～！</h1> <form action="#"> <ol> <li> 物件種別: <select name="sel_type" onchange="find.call(this, event, 3)"> <option value=""> <option value="売地">売地 <option value="新築住宅">新築住宅 <option value="中古住宅">中古住宅 <option value="マンション">マンション </select> <li> 市町村: <select name="sel_adr" onchange="find.call(this, event, 2)"> <option value=""> <option value="横浜市">横浜市 <option value="鶴見区">鶴見区 <option value="神奈川区">神奈川区 <option value="西区">西区 </select> <li> 価格: <select name="sel_kakaku" onchange="find.call(this, event, 4)"> <option value=""> <option value="0,500">500万未満 <option value="500,1000">500万以上1000万未満 <option value="1000,1500">1000万以上1500万未満 </select> </ol> <p> <input type="reset" onclick="allDisp()"> </p> </form> <ul id="BUKKEN"> <li> <ol> <li>物件1 <li>場所：神奈川県横浜市 <li>物件種別：売地 <li>価格：400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>お勧め物件です。 </ol> </li> <li> <ol> <li>物件48 <li>場所：神奈川県西区 <li>物件種別：マンション <li>価格：1400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>わけありですが、鈍感であれば見えません。 </ol> </li> </ul> <script> function find (_, n) { var e = this; var d = this.ownerDocument; var v = e.value; var r, l; if (v && n) { l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')'); e.disabled = true; switch (n) { case 2 : case 3 : r = Array.prototype.filter.call (l, function (e) { return this.test (e.textContent) }, new RegExp (v)); break; case 4: t = v.split (','); r = Array.prototype.filter.call (l, function (e) { var n, m; if (n = e.textContent.match (/(\d+)/)) { m = +n[1]; if (this.min <= m && m < this.max) { return true; } } }, {min: +t[0], max: +t[1]}); break; } if (r) Array.prototype.forEach.call (d.querySelectorAll ('#BUKKEN > li'), function (e) { if (-1 == this.indexOf (e)) e.style.display = 'none'; }, r.map (function (e) { return e.parentNode.parentNode; })); } } function allDisp () { Array.prototype.forEach.call (document.querySelectorAll ('#BUKKEN > li'), function (e) { e.style.display = 'list-item'; }); Array.prototype.forEach.call (document.querySelectorAll ('form select'), function (e) { e.disabled = false }); } </script>
お礼
具体的なサンプルを作成していただき、ありがとうございます。 さっそく組み込んでみました。 ちゃんと動作しました。 現在では、1度選択すると選択できないようになっていますが、 それを何度でも変更できるようにして、 検索ボタンの画像を押すと検索が開始され、 検索後も再度選択を変更し検索できるように 変更しようとチャレンジしましたが、できませんでした。 どこをどのように変更すればよいのでしょうか。 <html> <head> <title></title> <style> #BUKKEN, #BUKKEN ol { list-style :none; margin: 1em 0; padding : 0; } #BUKKEN li > ol > li:nth-of-type(1) { border-bottom : 2px blue solid; font-size: x-large; width:200px; color:#080; margin-bottom: 1ex; } #BUKKEN li > ol > li:nth-of-type(4) { color : red; } #BUKKEN li > ol > li:nth-of-type(6) > img { border : 1px green solid; width: 200px; height:80px; } #kensaku { border : 1px green solid; width: 600px; } </style> <script> function find (_, n) { var e = this; var d = this.ownerDocument; var v = e.value; var r, l; if (v && n) { l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')'); /* e.disabled = true; 何度でも選択できるようにするため */ switch (n) { case 2 : case 3 : //case2が場所、case3が物件種別 r = Array.prototype.filter.call (l, function (e) { //Array.filterは配列の楽な書き方。.callは第１引数を this として、Function を呼び出す。第２引数以降は、 Function への第１引数、第２引数、... となる。 return this.test (e.textContent) }, new RegExp (v)); //returnでeに戻る。new RegExpは正規表現オブジェクトといい、文字列のパターンマッチングを行う際に用いられます。 break; case 4: //case4は価格 var t = v.split (','); //varの追加 r = Array.prototype.filter.call (l, function (e) { var n, m; if (n = e.textContent.match (/(\d+)/)) { m = +n[1]; if (this.min <= m && m < this.max) { return true; } } }, {min: +t[0], max: +t[1]}); break; } if (r) Array.prototype.forEach.call (d.querySelectorAll ('#BUKKEN > li'), function (e) { if (-1 == this.indexOf (e)) e.style.display = 'none'; }, r.map (function (e) { return e.parentNode.parentNode; })); } } function allDisp () { Array.prototype.forEach.call (document.querySelectorAll ('#BUKKEN > li'), function (e) { e.style.display = 'list-item'; }); Array.prototype.forEach.call (document.querySelectorAll ('form select'), function (e) { e.disabled = false }); } </script> </head> <body> <div id="kensaku"> <form action="#"> <ol> <li> 物件種別: <select name="sel_type" onchange="find.call(this, event, 3)"> <option value=""> <option value="売地">売地 <option value="新築住宅">新築住宅 <option value="中古住宅">中古住宅 <option value="マンション">マンション </select> <li> 市町村: <select name="sel_adr" onchange="find.call(this, event, 2)"> <option value=""> <option value="横浜市">横浜市 <option value="鶴見区">鶴見区 <option value="神奈川区">神奈川区 <option value="西区">西区 </select> <li> 価格: <select name="sel_kakaku" onchange="find.call(this, event, 4)"> <option value=""> <option value="0,500">500万未満 <option value="500,1000">500万以上1000万未満 <option value="1000,1500">1000万以上1500万未満 </select> </ol> <p> <input type="reset" onclick="allDisp()"> </p> </form> <img src="sample.jpg" onclick="find(_, n)" alt="検索ボタン" /> </div> <ul id="BUKKEN"> <li> <ol> <li>物件1 <li>場所：神奈川県横浜市 <li>物件種別：売地 <li>価格：400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>お勧め物件です。 </ol> </li> <li> <ol> <li>物件48 <li>場所：神奈川県西区 <li>物件種別：マンション <li>価格：1400万円 <li>敷地面積：150.00m2 <li><img src="abc.jpg" alt="写真"> <li>わけありですが、鈍感であれば見えません。 </ol> </li> </ul> </body> </html>
- kokorone
- ベストアンサー率38% (417/1093)
サンプルは４８パターンを定義しています。 最初は、すべての要素をHTML内からJavaScriptで読み込もうと思いましたが、すべての要素を 配列内に定義してみました。 配列内の要素を、順番に従って、divブロックに定義します。 ４００件ということは、それだけで、コーディングが大変ですよ。
- kokorone
- ベストアンサー率38% (417/1093)
<html> <head> <script type="text/javascript"> <!-- type_tbl = new Array( "売地", "売地", "売地", "売地", "売地", "売地", "売地", "売地", "売地", "売地", "売地", "売地" ,"新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅", "新築住宅" ,"中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅", "中古住宅" ,"マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション", "マンション" ); adr_tbl = new Array( "神奈川県横浜市", "神奈川県横浜市", "神奈川県横浜市", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県西区", "神奈川県西区", "神奈川県西区" ,"神奈川県横浜市", "神奈川県横浜市", "神奈川県横浜市", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県西区", "神奈川県西区", "神奈川県西区" ,"神奈川県横浜市", "神奈川県横浜市", "神奈川県横浜市", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県西区", "神奈川県西区", "神奈川県西区" ,"神奈川県横浜市", "神奈川県横浜市", "神奈川県横浜市", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県鶴見区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県神奈川区", "神奈川県西区", "神奈川県西区", "神奈川県西区" ); kakaku_tbl = new Array( "400", "900", "1400", "400", "900", "1400", "400", "900", "1400", "400", "900", "1400" ,"400", "900", "1400", "400", "900", "1400", "400", "900", "1400", "400", "900", "1400" ,"400", "900", "1400", "400", "900", "1400", "400", "900", "1400", "400", "900", "1400" ,"400", "900", "1400", "400", "900", "1400", "400", "900", "1400", "400", "900", "1400" ); function dsp_select() { div_tbl = new Array(48); var idx; var dvname0; var dvname; var ok_flg; var divinf; var sel_type_idx = document.F1.sel_type.selectedIndex; var sel_adr_idx = document.F1.sel_adr.selectedIndex; var sel_kakaku_idx= document.F1.sel_kakaku.selectedIndex; var sel_type = document.F1.sel_type.options[sel_type_idx].value; var sel_adr = document.F1.sel_adr.options[sel_adr_idx].value; var sel_kakaku= document.F1.sel_kakaku.options[sel_kakaku_idx].value; for(idx = 0; idx < 48; idx ++){ if(idx < 10) { dvname0 = "00" + idx; } else if(idx < 100) { dvname0 = "0" + idx; } else { dvname0 = "" + idx; } dvname = "div" + dvname0; div_tbl[idx] = dvname; } for(idx = 0; idx < 48; idx ++){ ok_flg = 0; /* 物件種類チェック */ if((sel_type == "") || (sel_type == type_tbl[idx])) { /* 場所チェック */ if((sel_adr == "") || (adr_tbl[idx].indexOf(sel_adr,0) >= 0)) { /* 価格チェック */ if((sel_kakaku == "") || (((sel_kakaku - 500) <= kakaku_tbl[idx] ) && (sel_kakaku > kakaku_tbl[idx] ) )) { ok_flg = 1; } } } divinf = document.getElementById(div_tbl[idx]); if(ok_flg == 1) { divinf.style.display = "block"; } else { divinf.style.display = "none"; } } } // --> </script> </head> <body> <form name="F1" > <div > <table> <tr> <th>物件種別</th> <td> <select name="sel_type"> <option value=""> <option value="売地">売地 <option value="新築住宅">新築住宅 <option value="中古住宅">中古住宅 <option value="マンション">中古住宅 </select> </td> </tr> <tr> <th>市町村</th> <td> <select name="sel_adr"> <option value=""> <option value="横浜市">横浜市 <option value="鶴見区">鶴見区 <option value="神奈川区">神奈川区 <option value="西区">西区 </select> </td> </tr> <tr> <th>価格</th> <td> <select name="sel_kakaku"> <option value=""> <option value="500">500万未満 <option value="1000">500万以上1000万未満 <option value="1500">1000万以上1500万未満 </select> </td> </tr> <tr> <th></th> <td colspan="2"> <input type="button" id="btnok" value="検索" onclick="dsp_select()"> </td> </tr> </table> </div> <div id="div000" style="display:none"> <h2>物件1</h2> 場所：神奈川県横浜市<br> 物件種別：売地<br> 価格：400万円<br> 敷地面積：150.00m2<br> <br> <div class="shashinn">写真</div> <br> お勧め物件です。 </div> <div id="div047" style="display:none"> <h2>物件48</h2> 場所：神奈川県西区<br> 物件種別：マンション<br> 価格：1400万円<br> 敷地面積：150.00m2<br> <br> <div class="shashinn">写真</div> <br> お勧め物件です。 </div> </form> </body> </html> 文字数制限があるためdivブロックは最初と最後のみ記載しました。
お礼
具体的に作成していただき、ありがとうございます。 さっそく試してみたところ、動作しましたが、 気になる点がいくつかありました。 初めに白紙の状態で検索すると物件が現れますが、 できれば、物件情報は初めに全て見せたいです。 物件の情報変更や増減が激しく頻繁に更新する予定ですが、 修正箇所を少なくしたいです。
- kokorone
- ベストアンサー率38% (417/1093)
すみません。自宅の環境では、JavaScriptがうまく動作しません。 もしよければ、明日の夜までお待ちください。 会社のPCでサンプルを作成します。 しかし、なぜJavaScriptにこだわるのか、教えてください。 表示件数200件ということは、元データは何件でしょうか？ JavaScriptだけで実現するということは、 元データすべてをHTML内に記述しなければなりません。 ファイル容量が激増するとともに、ソースファイルを参照する ことで、すべてのデータがユーザに可視化されてしまいますよ。 業務につかうにせよ。個人がつかうにせよ。見た目にも凝りたいの であれば、サーバープログラムとの併用を考えてください。
お礼
ありがとうございます。 >JavaScriptにこだわるのか、教えてください。 JavaScriptとHTMLしか部分的に分かりません。 サーバーサイドのプログラムは分かりません。 興味もあり勉強して覚えたいですが、 今は時間がないのででJavaScriptのみで実現したいと考えました。 >表示件数200件ということは、元データは何件でしょうか？ 多くても全部で400件以内になると思います。 >ファイル容量が激増するとともに、ソースファイルを参照する >ことで、すべてのデータがユーザに可視化されてしまいますよ。 プログラムを全て見られることでセキュリティの弱点になるということでしょうか。 個人情報はまったくのせないので大丈夫だと思います。 >見た目にも凝りたいのであれば、 >サーバープログラムとの併用を考えてください。 400物件もあると動作が重くなってしまうのでしょうか。 >会社のPCでサンプルを作成します。 ありがとうございます。 よろしくお願いいたします。
- kokorone
- ベストアンサー率38% (417/1093)
質問者さまのスキルレベルにもよりますが、JavaScriptだけで可能かと言われれば、 可能です。 すべての候補の表示を非表示にします。 すべての候補のすべての要素に名前を付けます、 選択条件を元に、ｉｆ文でチェックして、該当物件だけ非表示を表示にします。 但し、一般的にはサーバープログラム ＶＢ等 と データベースを使用します。 検索条件により、データベースを検索し、抽出したデータを表示しています。
お礼
早急なアドバイス有難うございます。 すべての候補の表示を非表示にします。 すべての候補のすべての要素に名前を付けます、 選択条件を元に、ｉｆ文でチェックして、該当物件だけ非表示を表示にします。 イメージがわかないのですが、 そういったサンプルのようなものはありますでしょうか。 できればjavascriptだけでなんとかしたいです。
お礼
実現することができました。ありがとうございます。 最後の質問ですが、 条件にひっかからないときに「見つかりませんでした」 という案内がほしいと思い、追加してみました。 if (v && n) { l = d.querySelectorAll ('#BUKKEN > li > ol > li:nth-of-type(' + n + ')'); ～～～～～～～ }, {min: +t[0], max: +t[1]}); break; }else{ document.getElementById(#BUKKEN).innerHTML = "見つかりませんでした"; } 動きませんでした。 そんな単純なことではないのでしょうか。