underscore-min.jsでドロップダウン項目で絞込み検索

すみません、web作成している者です、困っておりますのでＨＥＬＰです！
３つの検索項目（ドロップダウンリスト）があり３つ選択して検索ボタンをクリックしたら
選択にあてはまる物が表示されるようにしたいのですが途中で分からなくなりご相談させてもらいました。下記にコードを記述しているのでご教授頂ければ幸いです。
よろしくお願いします。

<script type='text/javascript' src='/js/libs/underscore-min.js'></script>
<form id="search" name="search">
色を選択 <select id="color" name="color">
<option value="">指定しない</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>
形を選択 <select id="type" name="type">
<option value="">指定しない</option><option value="square">四角</option>
<option value="circle">丸</option>
</select> 人を選択
<select id="human" name="human">
<option value="">指定しない</option>
<option value="yamada">山田</option>
<option value="tanaka">田中</option>
</select>
<input type="submit" value="検索" />
</form>
<div id="items">
<div class="item red square yamada">
赤い四角山田</div>
<div class="item red square tanaka">
赤い四角田中</div>
<div class="item red circle yamada">
赤い丸山田</div>
<div class="item red circle tanaka">
赤い丸田中</div>
<div class="item blue square yamada">
青い四角山田</div>
<div class="item blue square tanaka">
青い四角田中</div>
<div class="item blue circle yamada">
青い丸山田</div>
<div class="item blue circle tanaka">
青い丸田中</div>
<div class="item green square yamada">
緑の四角山田</div>
<div class="item green square tanaka">
緑の四角田中</div>
<div class="item green circle yamada">
緑の丸山田</div>
<div class="item green circle tanaka">
緑の丸田中</div>
</div>
<script type="text/javascript">
var items = [
{
"name" : "赤い四角山田",
"color" : "red",
"type" : "square",
"human" : "yamada"
},
{
"name" : "赤い四角田中",
"color" : "red",
"type" : "square",
"human" : "tanaka"
},
{
"name" : "赤い丸山田",
"color" : "red",
"type" : "circle",
"human" : "yamada"
},
"name" : "赤い丸田中",
"color" : "red",
"type" : "circle",
"human" : "tanaka"
},
{
"name" : "青い四角山田",
"color" : "blue",
"type" : "square",
"human" : "yamada"
},
{
"name" : "青い四角田中",
"color" : "blue",
"type" : "square",
"human" : "tanaka"
},
{
"name" : "青い丸山田",
"color" : "blue",
"type" : "circle",
"human" : "yamada"
},
{
"name" : "青い丸田中",
"color" : "blue",
"type" : "circle",
"human" : "tanaka"
},
{
"name" : "緑の四角山田",
"color" : "green",
"type" : "square",
"human" : "yamada"
},
{
"name" : "緑の四角田中",
"color" : "green",
"type" : "square",
"human" : "tanaka"
},
{
"name" : "緑の丸山田",
"color" : "green",
"type" : "circle",
"human" : "yamada"
}
{
"name" : "緑の丸田中",
"color" : "green",
"type" : "circle",
"human" : "tanaka"
}
];


// 検索が押された時の処理
$('#search').on('submit' , function(event){
// デフォルトのイベントをキャンセル
event.preventDefault();

// 検索項目のオブジェクトを作成してセレクトボックスの値を格納
var query = {};
if($('#color').val() != ''){
query.color = $('#color').val();
}
if($('#type').val() != ''){
query.type = $('#type').val();
}
if($('#human').val() != ''){
query.human = $('#human').val();
}

// データの中から一致するオブジェクトを検索
var results = _.where(items, query);

// 返ってきた配列で出力処理
outputResults(results);
});


// 検索結果の出力処理
function outputResults(results){
// 変数の初期化
var html = '';

// 受け取った配列をループで処理
// 出力するHTMLの整形
jQuery.each(results, function() {
html += '<div class="item ' + this.color + ' ' + this.type + '' + this.human + '">';
html += this.name;
html += '</div>';
});

// HTMLに出力
$('#items').empty().append(html);
}


// ページ読み込み時はすべてのアイテムを出力する
$(window).on('load', function(){
outputResults(items);
});
</script>

No.2 回答者： fujillin 回答日時： 2017/12/08 17:14

#1です。

余計なおせっかいだったのかも知れませんね。大変失礼いたしました。

＞ボタンを押して検索をして一時表示されるのですが
＞また戻ってしまいます。
スクリプトの処理としては予定通り動いているのですが、formをsubmitするとブラウザはformの内容を送信して、返される結果を表示するという動作をします。
（今回のformではactionが指定されていないので、同じurlを再読み込みします）
その結果、補足の内容のようなことが起こっていると考えられます。

submitで処理する場合には、元のご質問文にも記述があったように、イベントの伝搬を停止する処理を入れる必要があります。（これによって、formのsubmitがキャンセルされ、遷移がなくなります）

$(function(){
$("#search input").on('submit' , function(evt){ // ←修正
evt.preventDefault(); // ←追加

var filter = [];
$("#search select").each(function(){ if(this.value) filter.push(this.value); });

$(".item").removeClass("hide").each(function(){
var t = $(this), flag = true;
$.map(filter, function(e){ if(!t.hasClass(e)) flag = false; });
if(!flag) t.addClass("hide");
});
});
});


※ 見た目は変わりませんが、inputをsubmitではなく、buttonなどにしてclickイベントで処理するなどにしても、ブラウザの遷移は発生しなくなりますので、イベントの停止も不要になります。

この回答へのお礼

ご回答ありがとうございます！
すみません、ご回答頂いた方法で試してみたのですが動作しませんでした。
ご回答頂いた内容で試しましたがうまくいかず...
度々すみません、

【修正】
<script type="text/javascript">
$(function(){
$("#search input").on('submit' , function(evt){
evt.preventDefault();
var filter = [];
$("#search select").each(function(){ if(this.value) filter.push(this.value); });
$(".item").removeClass("hide").each(function(){
var t = $(this), flag = true;
$.map(filter, function(e){ if(!t.hasClass(e)) flag = false; });
if(!flag) t.addClass("hide");
});
});
});
</script>
.
.
.
<form id="search" name="search">
色を選択 <select id="color" name="color">
<option value="">指定しない</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>
.
.
.

</select>
<input type="submit" value="Search" />
</form>

お礼日時：2017/12/08 23:05

No.1 回答者： fujillin 回答日時： 2017/12/08 13:31

こんにちは

underscoreはまったく存じませんが、お勉強がてらに試してみようかと思って試してみましたが…
ご提示のコードのままではまったく動作しないようですね。
ひとまず動くようにうするのに、以下を修正しました。
・jQuery（？←だと想像）を読み込む。
・スクリプトのitems変数定義の部分のタイポを修正
（かっこやカンマの有無の修正）
以上で、とりあえずご質問文にあるような動作をするみたいなので、これでご質問の問題点は解決ってことかも知れませんね。

スクリプトをざっと眺めてみると、なんとなく以下の点が気になりました。
1）underscoreとjQueryの両方を使うことはありだとは思いますが、ご質問の内容程度であればどちらか一方で十分ではないか（ご提示のスクリプトでunderscoreを利用しているのは、絞り込みの1行だけすよね？）
2）HTML内のクラス設定とスクリプト内のデータ定義とが完全にダブっているので、片方だけにしておいた方が、手間が省けるだけでなく矛盾などのミスを生じるリスクを減らせます。
3）絞り込んだ項目を、毎回HTMLで生成して入れ替えているようですが、ご提示の内容が目的なら、該当しない項目を非表示にする方が処理としては簡単になる。（HTMLの全体構成は変わらないまま）

特に、2）に関しては
・HTMLに全て記述しておいてそれを利用する
方法と
・データをスクリプトで定義（または外部から読み込み）して、表示内容はスクリプトで生成する
方法とが考えられます。
データを単独のファイル化したり、データベース的なものから読み込んだりすることを想定すると、後者の方が発展性があるように思います。
データのメンテナンス上も有利ですし、同じHTMLのままで読み込むデータを変えても同じ処理（＝機能）を実現できることなども利点といえるでしょう。


なさりたい内容を完全に把握できてはいないと思いますが、いろいろと書いた手前、片方のライブラリのみで簡単に実現する例を作成してみました。
　・ライブラリはjQueryのみ（DOM操作が簡単になるので）
　・HTMLにキーなどを設定して、スクリプト内にデータを持たない方式
　　（↑のお薦めとは矛盾してしまっていますが…）
　・表示の制御は　CSSの表示/非表示 で行う（具体的にはhideクラスを設定）
　・検索ボタンを押さなくても反応する（データ数にもよりますけれど…）
などの点を勝手ながら変更させていただいています。
（…てなことで、underscoreのお勉強はいたしませんでした。（笑））


<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#search select { margin-right: 1.2em; }
#items { margin-top: 2em; }
.item.hide { display: none; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2. …
<script type="text/javascript">
$(function(){
$("#search").on("change", function(){
var filter = [];
$("#search select").each(function(){ if(this.value) filter.push(this.value); });

$(".item").removeClass("hide").each(function(){
var t = $(this), flag = true;
$.map(filter, function(e){ if(!t.hasClass(e)) flag = false; });
if(!flag) t.addClass("hide");
});
});
});
</script>
</head>
<body>

<form id="search" name="search">
色を選択 <select id="color" name="color">
<option value="">指定しない</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>

形を選択 <select id="type" name="type">
<option value="">指定しない</option>
<option value="square">四角</option>
<option value="circle">丸</option>
</select>

人を選択 <select id="human" name="human">
<option value="">指定しない</option>
<option value="yamada">山田</option>
<option value="tanaka">田中</option>
</select>
</form>

<div id="items">
<div class="item red square yamada">赤い四角山田</div>
<div class="item red square tanaka">赤い四角田中</div>
<div class="item red circle yamada">赤い丸山田</div>
<div class="item red circle tanaka">赤い丸田中</div>
<div class="item blue square yamada">青い四角山田</div>
<div class="item blue square tanaka">青い四角田中</div>
<div class="item blue circle yamada">青い丸山田</div>
<div class="item blue circle tanaka">青い丸田中</div>
<div class="item green square yamada">緑の四角山田</div>
<div class="item green square tanaka">緑の四角田中</div>
<div class="item green circle yamada">緑の丸山田</div>
<div class="item green circle tanaka">緑の丸田中</div>
</div>

</body>
</html>

この回答へのお礼

こんにちわ
早々ご回答ありがとうございます。
大変助かりました。
検索ボタンが必要みたいで自分で付けてみたのですがボタンを押して検索をして一時表示されるのですが
また戻ってしまいます。
もしよろしければご教授頂ければ幸いです。
色々すみません...

<script type="text/javascript">
$(function(){
$("#search").on('submit' , function(){　　　　　　　　　　　　←変更部分
var filter = [];
$("#search select").each(function(){ if(this.value) filter.push(this.value); });

$(".item").removeClass("hide").each(function(){
var t = $(this), flag = true;
$.map(filter, function(e){ if(!t.hasClass(e)) flag = false; });
if(!flag) t.addClass("hide");
});
});
});
</script>
.
.
.

人を選択 <select id="human" name="human">
<option value="">指定しない</option>
<option value="yamada">山田</option>
<option value="tanaka">田中</option>
</select>
<input type="submit" value="Search" /> ←変更部分
</form>

お礼日時：2017/12/08 16:16