トップ Underscore.jsに関する質問 Underscore.jsにおける絞り込み検索について

編集履歴

回答編集履歴

テキスト修正

2018/09/01 00:19

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -212,7 +212,7 @@
-です。以下は上記の実装例です。前回の選択値が`[""]`であるかどうかの判定のために、初めのご質問でも使った、 lodash の [isEqual](https://lodash.com/docs/4.17.10#isEqual) を使用しています。
+です。以下は上記の実装例です。前回の選択値が`[""]`であるかどうかの判定のために、 lodash の [isEqual](https://lodash.com/docs/4.17.10#isEqual) を使用しています。

テキスト修正

2018/09/01 00:19

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -275,3 +275,27 @@
 上記の回答の中にも、`change`イベントが発生して選択された値を保存しておく場所として、 `data-`属性を使うというものが、いくつか見つかります。
+---
+**追記6**
+追記4 に書いたコードの以下の部分
+```javascript
+$(this).val($(this).val().filter(v => v!=""));
+```
+は、以下のように書くことで少し短くすることができます。
+```javascript
+$(this).val($(this).val().filter(v => v));
+```

テキスト修正

2018/08/31 23:22

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -204,7 +204,7 @@
-判断して処理を変えなければならないのは、
+上記の比較によって判断するべき条件は、
@@ -212,7 +212,7 @@
-です。以下は上記の考えを実装したコードです。
+です。以下は上記の実装例です。前回の選択値が`[""]`であるかどうかの判定のために、初めのご質問でも使った、 lodash の [isEqual](https://lodash.com/docs/4.17.10#isEqual) を使用しています。

テキスト修正

2018/08/31 23:14

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -266,7 +266,7 @@
-「changeイベントが発生する前の value を取得するにはどうしたらいいか？」というお題は、以下にも投稿されています。
+「onChangeハンドラの中で、対象のchangeイベントが発生する前の value を取得するにはどうしたらいいか？」というお題は、以下にも投稿されています。

テキスト修正

2018/08/31 16:49

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -257,3 +257,21 @@
 に作成しました。
+---
+**追記5**
+「changeイベントが発生する前の value を取得するにはどうしたらいいか？」というお題は、以下にも投稿されています。
+stackoverflow： [Getting value of select (dropdown) before change](https://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change)
+上記の回答の中にも、`change`イベントが発生して選択された値を保存しておく場所として、 `data-`属性を使うというものが、いくつか見つかります。

テキスト修正

2018/08/31 16:32

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -177,3 +177,83 @@
 [https://jsfiddle.net/jun68ykt/qw64naub/81/](https://jsfiddle.net/jun68ykt/qw64naub/81/)
+---
+**追記4**
+コメントのほうから、
+> 何度もすみません、もし可能でしたら
+> ・・・
+ということで頂戴した、追加要件を実現する方法です。
+ご希望の挙動を満たすには、`change`イベントが発生したときに選択状態にした`<option>`の value配列を保存しておいて、次に新たな`change`イベントが発生したときに選択されている`<option>`の value配列と、保存しておいた前回の`change`イベント発生時に選択状態にした値の配列とを比較して、次の望ましい状態を作ってから、再度、保存しておく処理が必要になると思います。どこに保存しておくかですが、 `data-`属性に保存するというのが一案です。
+判断して処理を変えなければならないのは、
+- 前回の`change`イベント発生時に、最終的に選択状態にした値の配列が、`[""]`であるか否か
+です。以下は上記の考えを実装したコードです。
+```javascript
+  // optionの選択状態が変更されたときの設定
+  $('select')
+    .data('prev-values', [""])
+    .on('change', function() {
+      if ($(this).val().includes("")) {
+        if (_.isEqual($(this).data('prev-values'), [""])) {
+          $(this).val($(this).val().filter(v => v!=""));
+        } else {
+          $(this).val([""]);
+        }
+      }
+      $(this).data('prev-values', [...$(this).val()]);
+   });
+```
+上記のサンプルを
+  [https://jsfiddle.net/jun68ykt/qw64naub/95/](https://jsfiddle.net/jun68ykt/qw64naub/95/)
+に作成しました。

テキスト追加

2018/08/31 14:53

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -166,7 +166,9 @@
 上記を追加すると、以下のような効果があります。
-例えば、`赤` と`緑`が選ばれている状態で、さらに `選択しない`を選択状態にするとします。すると上記で設定した`change`ハンドラ `function() { … }` が呼ばれて、関数の中で`$(this).val()`とすると、選択された `option` の valueの配列が取れます。今の場合は、`["", "red", "grren"]` と、３つの要素を持ちますが、これらの要素のうち、空文字列  `""` が含まれていれば(= `.includes("")` が true ならば)、「指定しない」が選ばれたことを示しています。その場合は、「指定しない」だけが選ばれていることを表す配列 `[""]` を、`$(this).val(設定値)` に与えると、「指定しない」ではない他の選択肢は選ばれていない状態にすることができます。
+例えば、`赤` と`緑`が選ばれている状態で、さらに `選択しない`を選択状態にすることを想定します。すると上記で設定した`change`ハンドラ `function() { … }` が呼ばれて、関数の中で`$(this).val()`とすると、選択された `option` の valueの配列が取れるので、今想定している状況では、`["", "red", "grren"]` と、３つの要素を持ちますが、これらの要素のうち、空文字列  `""` が含まれているということは(= `.includes("")` が true ならば)、「指定しない」が選ばれたことを示しています。その場合は、「指定しない」だけが選ばれていることを表す配列 `[""]` を、`$(this).val(設定値)` に与えると、「指定しない」ではない他の選択肢は選ばれていない状態にすることができます。

テキスト追加

2018/08/30 08:27

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -174,4 +174,4 @@
-[https://jsfiddle.net/jun68ykt/qw64naub/79/](https://jsfiddle.net/jun68ykt/qw64naub/79/)
+[https://jsfiddle.net/jun68ykt/qw64naub/81/](https://jsfiddle.net/jun68ykt/qw64naub/81/)

テキスト追加

2018/08/30 08:09

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -123,3 +123,55 @@
 複数選択可能な場合、color**s**およびtype**s**と、複数形にしたほうがよい点を回答に加筆しました。
+---
+**追記3**
+コメントのほうで頂いた、
+> “指定しない”と他の選択肢を連動させることは可能でしょうか？
+との件ですが、`<select>` の中にある、どの`<option>`が選ばれているかが変化したときの `chage`イベントハンドラに、ご要望の処理を設定することで可能です。
+具体的には例えば以下を追加します。
+```javascript
+  // ”指定しない" が選択されたら、他の選択肢は選ばれていない状態にする
+  $('select').on('change', function() {
+    if ($(this).val().includes(""))
+      $(this).val([""]);
+  });
+```
+上記を追加すると、以下のような効果があります。
+例えば、`赤` と`緑`が選ばれている状態で、さらに `選択しない`を選択状態にするとします。すると上記で設定した`change`ハンドラ `function() { … }` が呼ばれて、関数の中で`$(this).val()`とすると、選択された `option` の valueの配列が取れます。今の場合は、`["", "red", "grren"]` と、３つの要素を持ちますが、これらの要素のうち、空文字列  `""` が含まれていれば(= `.includes("")` が true ならば)、「指定しない」が選ばれたことを示しています。その場合は、「指定しない」だけが選ばれていることを表す配列 `[""]` を、`$(this).val(設定値)` に与えると、「指定しない」ではない他の選択肢は選ばれていない状態にすることができます。
+※以下にサンプルを作成しました。
+[https://jsfiddle.net/jun68ykt/qw64naub/79/](https://jsfiddle.net/jun68ykt/qw64naub/79/)

テキスト修正

2018/08/30 08:01

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -122,4 +122,4 @@
-複数選択可能な場合、color**s**およびtype**s**と、複数形にしたほうがよい点を加筆するため、回答を修正しました。
+複数選択可能な場合、color**s**およびtype**s**と、複数形にしたほうがよい点を回答に加筆しました。

テキスト修正

2018/08/29 00:13

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -10,7 +10,7 @@
-に記載のように、 v4 から削除されており、替わりに [filter](https://lodash.com/docs/4.17.10#filter) を使うことになっていますので、以下の回答もこれに従っています。
+に記載されているように、 v4 から削除されており、替わりに [filter](https://lodash.com/docs/4.17.10#filter) を使うことになっていますので、以下の回答もこれに従っています。

テキスト修正

2018/08/28 23:34

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -48,9 +48,9 @@
       return (
-        (query.color.includes("") || query.color.includes(item.color)) &&
+        (query.colors.includes("") || query.colors.includes(item.color)) &&
-        (query.type.includes("") || query.type.includes(item.type))
+        (query.types.includes("") || query.types.includes(item.type))
       );
@@ -60,7 +60,15 @@
-`select`が複数選択可能な場合、`query.color` と `query.type` はともに、選択された `<option>` の `value`属性を要素とする配列になります。これに対して、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) を使って、全item の中で条件を満たすものについて `true` を返すような関数を、`filter` の第２引数に渡します。
+- `select`が複数選択可能な場合、`.val()` は選択された `<option>`の value を要素とする配列になります。
+- したがって、`<select>`の id と、 `query` のプロパティ名である`color`と`type`は、`color`**s** および、`type`**s** と複数形にしたほうがよいです。
+- `query.colors` と `query.types` に対して、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) を使って、全item の中で条件を満たすものについて `true` を返すような関数を、`filter` の第２引数に渡します。
@@ -72,7 +80,7 @@
-- 複数選択： [https://jsfiddle.net/jun68ykt/qw64naub/60/](https://jsfiddle.net/jun68ykt/qw64naub/60/)
+- 複数選択： [https://jsfiddle.net/jun68ykt/qw64naub/68/](https://jsfiddle.net/jun68ykt/qw64naub/68/)
@@ -96,12 +104,22 @@
       return (
-        (query.color.includes("") || query.color.includes(item.color)) &&
+        (query.colors.includes("") || query.colors.includes(item.color)) &&
-        (query.type.includes("") || query.type.includes(item.type))
+        (query.types.includes("") || query.types.includes(item.type))
       );
     });
 ```
+---
+**追記2**
+複数選択可能な場合、color**s**およびtype**s**と、複数形にしたほうがよい点を加筆するため、回答を修正しました。

テキスト修正

2018/08/28 23:19

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -60,19 +60,19 @@
-`select`が複数選択可能な場合、`query.color` と `query.type` はともに配列になり、これに対して、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) を使って、全item の中でqueryにマッチするものについて `true` を return するようにしています。
+`select`が複数選択可能な場合、`query.color` と `query.type` はともに、選択された `<option>` の `value`属性を要素とする配列になります。これに対して、[includes](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) を使って、全item の中で条件を満たすものについて `true` を返すような関数を、`filter` の第２引数に渡します。
-なお、以下に上記のサンプルを作成しました。（使用している lodash のバージョンは、4.17.10です）
+以下に上記のサンプルを作成しました。（使用している lodash のバージョンは、4.17.10です）
-単一選択： [https://jsfiddle.net/jun68ykt/qw64naub/28/](https://jsfiddle.net/jun68ykt/qw64naub/28/)
+- 単一選択： [https://jsfiddle.net/jun68ykt/qw64naub/28/](https://jsfiddle.net/jun68ykt/qw64naub/28/)
-複数選択： [https://jsfiddle.net/jun68ykt/qw64naub/60/](https://jsfiddle.net/jun68ykt/qw64naub/60/)
+- 複数選択： [https://jsfiddle.net/jun68ykt/qw64naub/60/](https://jsfiddle.net/jun68ykt/qw64naub/60/)

テキスト修正

2018/08/28 23:01

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -36,7 +36,7 @@
 ```
-であるのを、以下のように修正すればよいかと思います。
+とするところを、以下のように修正すればよいかと思います。

テキスト修正

2018/08/28 22:36

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -86,7 +86,7 @@
-さはさりながら、`_.filter` の第２引数に関数を渡すのであれば、そもそも JavaScriptの標準の[Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) を使えばよく、その場合は以下です。
+さはさりながら、`_.filter` の第２引数に関数を渡すのであれば、そもそも JavaScriptの標準の[Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) を使って以下のように書けます。この場合は lodashは不要になります。
 ```javascript

テキスト修正

2018/08/28 12:57

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -86,7 +86,7 @@
-_.filter の第２引数に関数を渡すのであれば、そもそも JavaScriptの標準の[Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) を使えばよく、その場合は以下です。
+さはさりながら、`_.filter` の第２引数に関数を渡すのであれば、そもそも JavaScriptの標準の[Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) を使えばよく、その場合は以下です。
 ```javascript

テキスト修正

2018/08/28 12:16

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -86,7 +86,7 @@
-_.filter の第２引数に関数を渡すのであれば、JavaScriptの標準の[Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) を使えばよく、その場合は以下です。
+_.filter の第２引数に関数を渡すのであれば、そもそも JavaScriptの標準の[Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) を使えばよく、その場合は以下です。
 ```javascript

テキスト修正

2018/08/28 12:02

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -77,3 +77,31 @@
 以上参考になれば幸いです。
+---
+**追記**
+_.filter の第２引数に関数を渡すのであれば、JavaScriptの標準の[Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) を使えばよく、その場合は以下です。
+```javascript
+    // データの中から一致するオブジェクトを検索
+    var results = items.filter(function(item) {
+      return (
+        (query.color.includes("") || query.color.includes(item.color)) &&
+        (query.type.includes("") || query.type.includes(item.type))
+      );
+    });
+```

テキスト修正

2018/08/28 12:02

投稿

jun68ykt

スコア9058

test CHANGED Viewed

@@ -2,7 +2,7 @@
-まず、以下の回答の前提として、`lodash` の `where` は以下
+まず前提として、`lodash` の `where` は以下