teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問jQueryのプラグイン（Select2）がうまく動作しません。

編集履歴

質問編集履歴

7

質問変更

2017/02/20 11:09

投稿

sequence
sequence

スコア29

test CHANGED
File without changes
test CHANGED
@@ -154,6 +154,8 @@
154
154
 
155
155
  templateResult: formatRepo, // omitted for brevity, see the source of this page
156
156
 
157
+ templateSelection:formatRepoSelection,
158
+
157
159
  });
158
160
 
159
161
 
@@ -168,6 +170,12 @@
168
170
 
169
171
  }
170
172
 
173
+ function formatRepoSelection(repo){
174
+
175
+ return repo;
176
+
177
+ }
178
+
171
179
  ```
172
180
 
173
181
 

6

質問変更

2017/02/20 11:09

投稿

sequence
sequence

スコア29

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,9 @@
6
6
 
7
7
  ajaxを使って非同期で検索を行い、
8
8
 
9
- 検索結果をSelectBoxで表示させたいです。
9
+ 検索結果をSelectBoxで一覧表示。
10
+
11
+ その後、選択をしたいです。
10
12
 
11
13
 
12
14
 
@@ -20,9 +22,9 @@
20
22
 
21
23
  ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
22
24
 
23
- それを一覧で表示させるところまではできているのですが、
25
+ それを一覧で表示させるところまではできております。
24
26
 
25
- その一覧を選択できない（カーソルとカーソルキーどちらも）状態です。
27
+ 問題はその一覧を選択できずフォーカスも当たりません。
26
28
 
27
29
  ![イメージ説明](ad3f5f49c66aa831895c8700d3692fd1.png)
28
30
 
@@ -102,7 +104,7 @@
102
104
 
103
105
 
104
106
 
105
- 一方こちらでは動画が上手くいきません。
107
+ 一方こちらのコードが表示結果が選択できず、フォーカスも当たりません。
106
108
 
107
109
  ```
108
110
 

5

質問変更

2017/02/20 06:39

投稿

sequence
sequence

スコア29

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  イメージとしては
14
14
 
15
- https://select2.github.io/examples.html#tagsのLoading Remote Dataの処理をさせたいです。
15
+ [https://select2.github.io/examples.html#tags](https://select2.github.io/examples.html#tags)のLoading Remote Dataの処理をさせたいです。
16
16
 
17
17
 
18
18
 
@@ -32,31 +32,101 @@
32
32
 
33
33
  ドキュメントや他の人の実装を見てもわからなかったので、どこがおかしいのかご教授お願い致します。
34
34
 
35
+
36
+
37
+ 下記のコードは[サンプル](https://select2.github.io/examples.html#tags)を参考にしています。
38
+
39
+ こちらでは問題なく動作が行われます。
40
+
35
41
  ```
36
-
37
- $(function(){
38
42
 
39
43
  $(".s-select").select2({
40
44
 
41
- ajax:{
45
+ ajax: {
42
46
 
43
- url:"/select",
47
+ url: "https://api.github.com/search/repositories",
44
48
 
45
- type:"POST",
49
+ dataType: 'json',
46
50
 
47
- dataType:"json",
51
+ delay: 250,
48
52
 
49
- data:function(params){
53
+ data: function (params) {
50
54
 
51
- return{
55
+ return {
52
56
 
53
- data:params.term
57
+ q: params.term, // search term
54
58
 
59
+ page: params.page
60
+
61
+ };
62
+
63
+ },
64
+
65
+ processResults: function (data, params) {
66
+
67
+ console.log(data.items);
68
+
69
+
70
+
71
+ return {
72
+
73
+ results: data.items,
74
+
75
+ };
76
+
77
+ },
78
+
79
+ cache: true
80
+
81
+ },
82
+
83
+ escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
84
+
85
+ minimumInputLength: 1,
86
+
87
+ templateResult: formatRepo, // omitted for brevity, see the source of this page
88
+
89
+ });
90
+
91
+ function formatRepo(repo){
92
+
93
+ var markup = "<div class='select2-result-repository clearfix'>" + repo + "</div>";
94
+
95
+ return markup;
96
+
55
- }
97
+ }
98
+
99
+ });
100
+
101
+ ```
102
+
103
+
104
+
105
+ 一方こちらでは動画が上手くいきません。
106
+
107
+ ```
108
+
109
+ ajax: {
110
+
111
+ method:"POST",
112
+
113
+ url: "/company/select",
114
+
115
+ dataType: 'json',
116
+
117
+ data: function (params) {
118
+
119
+ return {
120
+
121
+ companyName: params.term, // search term
122
+
123
+ };
56
124
 
57
125
  },
58
126
 
59
127
  processResults: function (data, params) {
128
+
129
+ console.log(data)
60
130
 
61
131
  return {
62
132
 
@@ -66,9 +136,7 @@
66
136
 
67
137
  },
68
138
 
69
- cache: true,
139
+ cache: true
70
-
71
-
72
140
 
73
141
  },
74
142
 
@@ -84,8 +152,6 @@
84
152
 
85
153
  templateResult: formatRepo, // omitted for brevity, see the source of this page
86
154
 
87
- templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
88
-
89
155
  });
90
156
 
91
157
 
@@ -94,48 +160,16 @@
94
160
 
95
161
 
96
162
 
97
- var markup = "<div class='select2-result-repository clearfix'>" +
98
-
99
- "<div class='select2-result-repository__avatar'></div>" +
100
-
101
- "<div class='select2-result-repository__meta'>" +
102
-
103
- "<div class='select2-result-repository__title'>" + repo.data + "</div>";
104
-
105
-
106
-
107
- if (repo.description) {
108
-
109
- markup += "<div class='select2-result-repository__description'>" + repo.data + "</div>";
163
+ var markup = "<div class='select2-result-repository clearfix'>" + repo.companyName + "</div>";
110
-
111
- }
112
-
113
-
114
-
115
- markup += "<div class='select2-result-repository__statistics'>" +
116
-
117
- "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.data + " Forks</div>" +
118
-
119
- "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.data + " Stars</div>" +
120
-
121
- "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.data + " Watchers</div>" +
122
-
123
- "</div>" +
124
-
125
- "</div></div>";
126
-
127
-
128
164
 
129
165
  return markup;
130
166
 
131
167
  }
132
168
 
133
- function formatRepoSelection (repo) {
169
+ ```
134
170
 
135
- return repo.full_name || repo.text;
136
171
 
137
- }
138
172
 
139
- });
173
+ 違いは、GETかPOSTかの違いだけかと思っております。
140
174
 
141
- ```
175
+ お力添えの程、宜しく御願い致します。

4

質問追加

2017/02/20 03:28

投稿

sequence
sequence

スコア29

test CHANGED
File without changes
test CHANGED
@@ -130,6 +130,12 @@
130
130
 
131
131
  }
132
132
 
133
+ function formatRepoSelection (repo) {
134
+
135
+ return repo.full_name || repo.text;
136
+
137
+ }
138
+
133
139
  });
134
140
 
135
141
  ```

3

質問変更

2017/02/19 09:05

投稿

sequence
sequence

スコア29

test CHANGED
File without changes
test CHANGED
@@ -88,6 +88,48 @@
88
88
 
89
89
  });
90
90
 
91
+
92
+
93
+ function formatRepo (repo) {
94
+
95
+
96
+
97
+ var markup = "<div class='select2-result-repository clearfix'>" +
98
+
99
+ "<div class='select2-result-repository__avatar'></div>" +
100
+
101
+ "<div class='select2-result-repository__meta'>" +
102
+
103
+ "<div class='select2-result-repository__title'>" + repo.data + "</div>";
104
+
105
+
106
+
107
+ if (repo.description) {
108
+
109
+ markup += "<div class='select2-result-repository__description'>" + repo.data + "</div>";
110
+
111
+ }
112
+
113
+
114
+
115
+ markup += "<div class='select2-result-repository__statistics'>" +
116
+
117
+ "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.data + " Forks</div>" +
118
+
119
+ "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.data + " Stars</div>" +
120
+
121
+ "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.data + " Watchers</div>" +
122
+
123
+ "</div>" +
124
+
125
+ "</div></div>";
126
+
127
+
128
+
129
+ return markup;
130
+
131
+ }
132
+
91
133
  });
92
134
 
93
135
  ```

2

タイトル変更

2017/02/19 08:56

投稿

sequence
sequence

スコア29

test CHANGED
@@ -1 +1 @@
1
- jQueryのプラグイン（Select2）がうまく動作しません。（パート2）
1
+ jQueryのプラグイン（Select2）がうまく動作しません。
test CHANGED
File without changes

1

質問編集

2017/02/19 08:35

投稿

sequence
sequence

スコア29

test CHANGED
File without changes
test CHANGED
@@ -72,17 +72,21 @@
72
72
 
73
73
  },
74
74
 
75
- templateResult:selectResult,
75
+ escapeMarkup: function (markup) {
76
+
77
+ console.log(markup);
78
+
79
+ return markup;
80
+
81
+ }, // let our custom formatter work
82
+
83
+ minimumInputLength: 1,
84
+
85
+ templateResult: formatRepo, // omitted for brevity, see the source of this page
86
+
87
+ templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
76
88
 
77
89
  });
78
-
79
-
80
-
81
- function selectResult(data){
82
-
83
- return data.name;
84
-
85
- }
86
90
 
87
91
  });
88
92