回答編集履歴
6
テキスト修正
test
CHANGED
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
|
|
73
|
-
- 入力された、複数の検索ワードがスペースで区切られた文字列から、検索ワードの配列を取得する
|
|
73
|
+
- 入力された、複数の検索ワードがスペース（やタブなどの空白文字）で区切られた文字列から、検索ワードの配列を取得する
|
|
74
74
|
|
|
75
75
|
|
|
76
76
|
|
5
テキスト修正
test
CHANGED
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
|
|
83
83
|
|
|
84
84
|
|
|
85
|
-
すなわち、`$('#search').val()` が上記のような文字列であるとします。これは、3つの検索ワード `abc`, `def`, `xy` といくつかのスペースを含んでいます。`abc` の前には1個のスペースがあり、`abc`と `def` の間には1個のスペース、`def`と `xy` との間には2個のスペースがあり、さらに`xy` の後ろには3個のスペースがあるというものです。これは、検索ワード入力欄で、いくつかのワードを入力したり消したりしているうちに、検索ワードの間のスペースの数が
|
|
85
|
+
すなわち、`$('#search').val()` が上記のような文字列であるとします。これは、3つの検索ワード `abc`, `def`, `xy` といくつかのスペースを含んでいます。`abc` の前には1個のスペースがあり、`abc`と `def` の間には1個のスペース、`def`と `xy` との間には2個のスペースがあり、さらに`xy` の後ろには3個のスペースがあるというものです。これは、検索ワード入力欄で、いくつかのワードを入力したり消したりしているうちに、検索ワードの間のスペースの数が2個以上ある箇所ができてしまったり、先頭の検索ワードの前や最後の検索ワードの後に1個以上スペースが残ってしまっている状況を再現しています。このとき
|
|
86
86
|
|
|
87
87
|
|
|
88
88
|
|
4
テキスト修正
test
CHANGED
|
@@ -158,4 +158,4 @@
|
|
|
158
158
|
|
|
159
159
|
|
|
160
160
|
|
|
161
|
-
によって、当該`li` の CSSプロパティ
|
|
161
|
+
によって、当該`li` の CSSプロパティ`display` に、`matched` が true だったら `'list-item'`が指定され、falseだったら `'none'` が指定されます。各`<li>`について、CSS `display` に `'list-item'`が指定されると表示され、`'none'`が指定されると表示されなくなります。
|
3
テキスト修正
test
CHANGED
|
@@ -45,3 +45,117 @@
|
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
以上、参考になれば幸いです。
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
### 追記
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
コメントから頂きました質問に回答します。
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
> 「$('#search').val().trim().split(/\s+/);」部分は、
|
|
64
|
+
|
|
65
|
+
> 入力されたキーワードから無駄なスペースを削除したものを取得するという認識で合ってますでしょうか？
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
はい。おおよそ合ってます。より正確にいうと、
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
- 入力された、複数の検索ワードがスペースで区切られた文字列から、検索ワードの配列を取得する
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
という処理を行っています。具体例を挙げますと、たとえば、`#search` の input にたとえば以下のように入力されているとします。
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
` abc def xy `
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
すなわち、`$('#search').val()` が上記のような文字列であるとします。これは、3つの検索ワード `abc`, `def`, `xy` といくつかのスペースを含んでいます。`abc` の前には1個のスペースがあり、`abc`と `def` の間には1個のスペース、`def`と `xy` との間には2個のスペースがあり、さらに`xy` の後ろには3個のスペースがあるというものです。これは、検索ワード入力欄で、いくつかのワードを入力したり消したりしているうちに、検索ワードの間のスペースの数が1個以上ある箇所があったり、先頭キーワードの前や最後のワードの後に1個以上スペースが残っているような状況を想定しています。このとき
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
```javascript
|
|
90
|
+
|
|
91
|
+
const searchKeys = $('#search').val().trim().split(/\s+/);
|
|
92
|
+
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
によって、`searchKeys` として以下の配列が取得されます。
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
["abc", "def", "xy"]
|
|
102
|
+
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
> また、「searchKeys.every(key => RegExp(key, 'i').test(text));」部分は、
|
|
110
|
+
|
|
111
|
+
> リスト情報と取得した配列キーワードを検証しているのでしょうか？
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
はい、そうです。リストアイテム（`<li>`）に含まれるテキストが、入力された複数の検索ワードに該当しているかを検証しています。より詳しく説明すると、
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
```javascript
|
|
120
|
+
|
|
121
|
+
const matched = searchKeys.every(key => RegExp(key, 'i').test(text));
|
|
122
|
+
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
という行によって、左辺の `matched` に `true` か `false` のどちらかが入ります。`true` のときは、ループで回している、各ループ本体における当該の `li` の内容が複数の検索ワードについてのAND条件に「該当した」ことを表します。逆に `false` のときは、「該当しなかった」ことを表します。
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
> 最後に「matched ? 'list-item'」の部分は
|
|
134
|
+
|
|
135
|
+
> どういった意味を成しているのでしょうか？
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
その後の `: 'none'` も含めた
|
|
140
|
+
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
matched ? 'list-item' : 'none'
|
|
144
|
+
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
の部分は、[条件（三項）演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) を使った式です。`matched` が true のとき `'list-item'` 、 false のとき `'none'` という文字列を返しますので、
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
$(this).css('display', matched ? 'list-item' : 'none');
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
によって、当該`li` の CSSプロパティ'display' に、`matched` が true だったら `list-item`が指定され、falseだったら `'none'` が指定されます。`'none'`が指定されるとその`li`は表示されなくなります。
|
2
テキスト修正
test
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
|
31
|
-
|
|
31
|
+
このcodepenのサンプルは、以下のように動作します。
|
|
32
32
|
|
|
33
33
|
- たとえば、`bcdef` を入力して検索をクリックすると、`abcd bcdef` と `bcdef stuvw` の２つが表示される。
|
|
34
34
|
|
1
テキスト修正
test
CHANGED
|
@@ -28,4 +28,20 @@
|
|
|
28
28
|
|
|
29
29
|
|
|
30
30
|
|
|
31
|
+
上記のコードは、以下のように動作します。
|
|
32
|
+
|
|
33
|
+
- たとえば、`bcdef` を入力して検索をクリックすると、`abcd bcdef` と `bcdef stuvw` の２つが表示される。
|
|
34
|
+
|
|
35
|
+
- 入力した`bcdef` を消さずに、続けてスペースを打ち、さらに `abcd` と入力してから検索をクリックすると、`bcdef`と`abcd`の両方を含む `abcd bcdef` のみが表示される。
|
|
36
|
+
|
|
37
|
+
- 検索ワードに対するマッチングにおいて、大文字と小文字の違いは無視される。
|
|
38
|
+
|
|
39
|
+
- 検索ワード入力欄を消去してから検索をクリックすると、すべてのリストアイテムが表示される。
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
31
|
-
正規表現で使っている `\b` は単語の境界（[Word
|
|
43
|
+
また、正規表現で使っている `\b` は単語の境界（[Word Boundaries](https://www.regular-expressions.info/wordboundaries.html)）です。
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
以上、参考になれば幸いです。
|