Q&A前提・実現したいこと
Underscore.jsとjsonを使った検索機能付きのサイトを作成中です。
下記のサイトを参考にさレクトボックスでの実装は出来たのですが、
これをマルチのセレクトボックスで複数選択し検索したいのですが、
何分未熟なものでどうしてもうまくいきません。
"color"のredとblueを含む値を取得して検索するなど。
どなたかご教授頂ける方がいらっしゃいましたらお伺できますでしょうか？
何卒よろしくお願いいたします。
https://www.tam-tam.co.jp/tipsnote/javascript/post10620.html
<form id="search" name="search"> 色 <select name="color" id="color"> <option value="">指定しない</option> <option value="red">赤</option> <option value="blue">青</option> <option value="green">緑</option> </select>形
<select name="type" id="type">
<option value="">指定しない</option>
<option value="square">四角</option>
<option value="circle">丸</option>
</select>
var items = [
{
"name" : "赤い四角",
"color" : "red",
"type" : "square"
},
{
"name" : "赤い丸",
"color" : "red",
"type" : "circle"
},
{
"name" : "青い四角",
"color" : "blue",
"type" : "square"
},
{
"name" : "青い丸",
"color" : "blue",
"type" : "circle"
},
{
"name" : "緑の四角",
"color" : "green",
"type" : "square"
},
{
"name" : "緑の丸",
"color" : "green",
"type" : "circle"
}
];
// 検索が押された時の処理
$('#search').on('submit' , function(event){
// デフォルトのイベントをキャンセル
event.preventDefault();
// 検索項目のオブジェクトを作成してセレクトボックスの値を格納
var query = {};
if($('#color').val() != ''){
query.color = $('#color').val();
}
if($('#type').val() != ''){
query.type = $('#type').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 + '">'; html += this.name; html += '</div>'; }); // HTMLに出力 $('#items').empty().append(html);
}
// ページ読み込み時はすべてのアイテムを出力する
$(window).on('load', function(){
outputResults(items);
});
回答2件
0
ベストアンサー
こんにちは。
まず前提として、lodash の where は以下
https://github.com/lodash/lodash/wiki/Deprecations
に記載されているように、 v4 から削除されており、替わりに filter を使うことになっていますので、以下の回答もこれに従っています。
ご質問では
マルチのセレクトボックスで複数選択し検索したい
とのことですが、その場合は filter の第２引数に、条件にマッチするかどうかにより true または false を返す関数を与えれば実現できます。
具体的な修正案の一例を以下に挙げます。単一選択の場合はご質問にあるコードと同様に、
javascript
1 // データの中から一致するオブジェクトを検索 2 var results = _.filter(items, query);
とするところを、以下のように修正すればよいかと思います。
javascript
1 // データの中から一致するオブジェクトを検索 2 var results = _.filter(items, function(item) { 3 return ( 4 (query.colors.includes("") || query.colors.includes(item.color)) && 5 (query.types.includes("") || query.types.includes(item.type)) 6 ); 7 });
-
selectが複数選択可能な場合、.val()は選択された<option>の value を要素とする配列になります。 -
したがって、
<select>の id と、queryのプロパティ名であるcolorとtypeは、colors および、types と複数形にしたほうがよいです。 -
query.colorsとquery.typesに対して、includes を使って、全item の中で条件を満たすものについてtrueを返すような関数を、filterの第２引数に渡します。
以下に上記のサンプルを作成しました。（使用している lodash のバージョンは、4.17.10です）
以上参考になれば幸いです。
追記
さはさりながら、_.filter の第２引数に関数を渡すのであれば、そもそも JavaScriptの標準のArray.prototype.filter() を使って以下のように書けます。この場合は lodashは不要になります。
javascript
1 // データの中から一致するオブジェクトを検索 2 var results = items.filter(function(item) { 3 return ( 4 (query.colors.includes("") || query.colors.includes(item.color)) && 5 (query.types.includes("") || query.types.includes(item.type)) 6 ); 7 });
追記2
複数選択可能な場合、colorsおよびtypesと、複数形にしたほうがよい点を回答に加筆しました。
追記3
コメントのほうで頂いた、
“指定しない”と他の選択肢を連動させることは可能でしょうか？
との件ですが、<select> の中にある、どの<option>が選ばれているかが変化したときの chageイベントハンドラに、ご要望の処理を設定することで可能です。
具体的には例えば以下を追加します。
javascript
1 // ”指定しない" が選択されたら、他の選択肢は選ばれていない状態にする 2 $('select').on('change', function() { 3 if ($(this).val().includes("")) 4 $(this).val([""]); 5 });
上記を追加すると、以下のような効果があります。
例えば、赤 と緑が選ばれている状態で、さらに 選択しないを選択状態にすることを想定します。すると上記で設定したchangeハンドラ function() { … } が呼ばれて、関数の中で$(this).val()とすると、選択された option の valueの配列が取れるので、今想定している状況では、["", "red", "grren"] と、３つの要素を持ちますが、これらの要素のうち、空文字列 "" が含まれているということは(= .includes("") が true ならば)、「指定しない」が選ばれたことを示しています。その場合は、「指定しない」だけが選ばれていることを表す配列 [""] を、$(this).val(設定値) に与えると、「指定しない」ではない他の選択肢は選ばれていない状態にすることができます。
※以下にサンプルを作成しました。
https://jsfiddle.net/jun68ykt/qw64naub/81/
追記4
コメントのほうから、
何度もすみません、もし可能でしたら
・・・
ということで頂戴した、追加要件を実現する方法です。
ご希望の挙動を満たすには、changeイベントが発生したときに選択状態にした<option>の value配列を保存しておいて、次に新たなchangeイベントが発生したときに選択されている<option>の value配列と、保存しておいた前回のchangeイベント発生時に選択状態にした値の配列とを比較して、次の望ましい状態を作ってから、再度、保存しておく処理が必要になると思います。どこに保存しておくかですが、 data-属性に保存するというのが一案です。
上記の比較によって判断するべき条件は、
- 前回の
changeイベント発生時に、最終的に選択状態にした値の配列が、[""]であるか否か
です。以下は上記の実装例です。前回の選択値が[""]であるかどうかの判定のために、 lodash の isEqual を使用しています。
javascript
1 // optionの選択状態が変更されたときの設定 2 $('select') 3 .data('prev-values', [""]) 4 .on('change', function() { 5 if ($(this).val().includes("")) { 6 if (_.isEqual($(this).data('prev-values'), [""])) { 7 $(this).val($(this).val().filter(v => v!="")); 8 } else { 9 $(this).val([""]); 10 } 11 } 12 $(this).data('prev-values', [...$(this).val()]); 13 });
上記のサンプルを
https://jsfiddle.net/jun68ykt/qw64naub/95/
に作成しました。
追記5
「onChangeハンドラの中で、対象のchangeイベントが発生する前の value を取得するにはどうしたらいいか？」というお題は、以下にも投稿されています。
stackoverflow： Getting value of select (dropdown) before change
上記の回答の中にも、changeイベントが発生して選択された値を保存しておく場所として、 data-属性を使うというものが、いくつか見つかります。
追記6
追記4 に書いたコードの以下の部分
javascript
1$(this).val($(this).val().filter(v => v!=""));
は、以下のように書くことで少し短くすることができます。
javascript
1$(this).val($(this).val().filter(v => v));
投稿2018/08/28 11:40
編集2018/09/01 00:19
総合スコア9058
0
なんどもすみません、もし可能でしたら“指定しない”を選択した状態で、“赤”“青”などを選択すると指定しないの選択が外れるようにすることは出来ますでしょうか？
投稿2018/08/31 06:41
編集2018/08/31 06:45
総合スコア9
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/29 09:34
2018/08/29 10:34
2018/08/30 07:10
2018/08/30 08:03
2018/08/30 08:04
2018/08/30 08:11
2018/08/30 09:12
2018/08/31 06:57
2018/08/31 14:55
2018/08/31 23:48
2018/09/03 05:24
2018/09/04 06:10
2018/09/04 06:54
2018/09/04 07:28
2018/09/04 08:01
2018/09/04 08:05
2018/09/04 09:06
2018/09/04 10:33 編集
2018/09/05 02:13
2018/09/06 05:59