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

編集履歴

質問編集履歴

7

質問変更

2017/02/20 11:09

投稿

sequence
sequence

スコア29

title CHANGED
File without changes
body CHANGED
@@ -76,6 +76,7 @@
76
76
  }, // let our custom formatter work
77
77
  minimumInputLength: 1,
78
78
  templateResult: formatRepo, // omitted for brevity, see the source of this page
79
+ templateSelection:formatRepoSelection,
79
80
  });
80
81
 
81
82
  function formatRepo (repo) {
@@ -83,6 +84,9 @@
83
84
  var markup = "<div class='select2-result-repository clearfix'>" + repo.companyName + "</div>";
84
85
  return markup;
85
86
  }
87
+ function formatRepoSelection(repo){
88
+ return repo;
89
+ }
86
90
  ```
87
91
 
88
92
  違いは、GETかPOSTかの違いだけかと思っております。

6

質問変更

2017/02/20 11:09

投稿

sequence
sequence

スコア29

title CHANGED
File without changes
body CHANGED
@@ -2,15 +2,16 @@
2
2
  Select2というライブラリを用いて、
3
3
  テキストボックスにテキストを入力したら、
4
4
  ajaxを使って非同期で検索を行い、
5
- 検索結果をSelectBoxで表示させたいです。
5
+ 検索結果をSelectBoxで一覧表示。
6
+ その後、選択をしたいです。
6
7
 
7
8
  イメージとしては
8
9
  [https://select2.github.io/examples.html#tags](https://select2.github.io/examples.html#tags)のLoading Remote Dataの処理をさせたいです。
9
10
 
10
11
  ## 現状
11
12
  ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
12
- それを一覧で表示させるところまではできているのですが、
13
+ それを一覧で表示させるところまではできております。
13
- その一覧を選択できない（カーソルとカーソルキーどちらも）状態です。
14
+ 問題はその一覧を選択できずフォーカスも当たりません。
14
15
  ![イメージ説明](ad3f5f49c66aa831895c8700d3692fd1.png)
15
16
 
16
17
  オプションに問題があるとは思うのですが、
@@ -50,7 +51,7 @@
50
51
  });
51
52
  ```
52
53
 
53
- 一方こちらでは動画が上手くいきません。
54
+ 一方こちらのコードが表示結果が選択できず、フォーカスも当たりません。
54
55
  ```
55
56
  ajax: {
56
57
  method:"POST",

5

質問変更

2017/02/20 06:39

投稿

sequence
sequence

スコア29

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,7 @@
5
5
  検索結果をSelectBoxで表示させたいです。
6
6
 
7
7
  イメージとしては
8
- https://select2.github.io/examples.html#tagsのLoading Remote Dataの処理をさせたいです。
8
+ [https://select2.github.io/examples.html#tags](https://select2.github.io/examples.html#tags)のLoading Remote Dataの処理をさせたいです。
9
9
 
10
10
  ## 現状
11
11
  ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
@@ -15,25 +15,59 @@
15
15
 
16
16
  オプションに問題があるとは思うのですが、
17
17
  ドキュメントや他の人の実装を見てもわからなかったので、どこがおかしいのかご教授お願い致します。
18
+
19
+ 下記のコードは[サンプル](https://select2.github.io/examples.html#tags)を参考にしています。
20
+ こちらでは問題なく動作が行われます。
18
21
  ```
19
- $(function(){
20
22
  $(".s-select").select2({
21
- ajax:{
23
+ ajax: {
22
- url:"/select",
24
+ url: "https://api.github.com/search/repositories",
23
- type:"POST",
24
- dataType:"json",
25
+ dataType: 'json',
26
+ delay: 250,
25
- data:function(params){
27
+ data: function (params) {
26
- return{
28
+ return {
29
+ q: params.term, // search term
27
- data:params.term
30
+ page: params.page
31
+ };
32
+ },
33
+ processResults: function (data, params) {
34
+ console.log(data.items);
35
+
36
+ return {
37
+ results: data.items,
38
+ };
39
+ },
40
+ cache: true
41
+ },
42
+ escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
43
+ minimumInputLength: 1,
44
+ templateResult: formatRepo, // omitted for brevity, see the source of this page
45
+ });
46
+ function formatRepo(repo){
47
+ var markup = "<div class='select2-result-repository clearfix'>" + repo + "</div>";
48
+ return markup;
28
- }
49
+ }
50
+ });
51
+ ```
52
+
53
+ 一方こちらでは動画が上手くいきません。
54
+ ```
55
+ ajax: {
56
+ method:"POST",
57
+ url: "/company/select",
58
+ dataType: 'json',
59
+ data: function (params) {
60
+ return {
61
+ companyName: params.term, // search term
62
+ };
29
63
  },
30
64
  processResults: function (data, params) {
65
+ console.log(data)
31
66
  return {
32
67
  results: data,
33
68
  };
34
69
  },
35
- cache: true,
70
+ cache: true
36
-
37
71
  },
38
72
  escapeMarkup: function (markup) {
39
73
  console.log(markup);
@@ -41,31 +75,14 @@
41
75
  }, // let our custom formatter work
42
76
  minimumInputLength: 1,
43
77
  templateResult: formatRepo, // omitted for brevity, see the source of this page
44
- templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
45
78
  });
46
79
 
47
80
  function formatRepo (repo) {
48
81
 
49
- var markup = "<div class='select2-result-repository clearfix'>" +
50
- "<div class='select2-result-repository__avatar'></div>" +
51
- "<div class='select2-result-repository__meta'>" +
52
- "<div class='select2-result-repository__title'>" + repo.data + "</div>";
53
-
54
- if (repo.description) {
55
- markup += "<div class='select2-result-repository__description'>" + repo.data + "</div>";
82
+ var markup = "<div class='select2-result-repository clearfix'>" + repo.companyName + "</div>";
56
- }
57
-
58
- markup += "<div class='select2-result-repository__statistics'>" +
59
- "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.data + " Forks</div>" +
60
- "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.data + " Stars</div>" +
61
- "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.data + " Watchers</div>" +
62
- "</div>" +
63
- "</div></div>";
64
-
65
83
  return markup;
66
84
  }
67
- function formatRepoSelection (repo) {
68
- return repo.full_name || repo.text;
69
- }
70
- });
71
- ```
85
+ ```
86
+
87
+ 違いは、GETかPOSTかの違いだけかと思っております。
88
+ お力添えの程、宜しく御願い致します。

4

質問追加

2017/02/20 03:28

投稿

sequence
sequence

スコア29

title CHANGED
File without changes
body CHANGED
@@ -64,5 +64,8 @@
64
64
 
65
65
  return markup;
66
66
  }
67
+ function formatRepoSelection (repo) {
68
+ return repo.full_name || repo.text;
69
+ }
67
70
  });
68
71
  ```

3

質問変更

2017/02/19 09:05

投稿

sequence
sequence

スコア29

title CHANGED
File without changes
body CHANGED
@@ -43,5 +43,26 @@
43
43
  templateResult: formatRepo, // omitted for brevity, see the source of this page
44
44
  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
45
45
  });
46
+
47
+ function formatRepo (repo) {
48
+
49
+ var markup = "<div class='select2-result-repository clearfix'>" +
50
+ "<div class='select2-result-repository__avatar'></div>" +
51
+ "<div class='select2-result-repository__meta'>" +
52
+ "<div class='select2-result-repository__title'>" + repo.data + "</div>";
53
+
54
+ if (repo.description) {
55
+ markup += "<div class='select2-result-repository__description'>" + repo.data + "</div>";
56
+ }
57
+
58
+ markup += "<div class='select2-result-repository__statistics'>" +
59
+ "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.data + " Forks</div>" +
60
+ "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.data + " Stars</div>" +
61
+ "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.data + " Watchers</div>" +
62
+ "</div>" +
63
+ "</div></div>";
64
+
65
+ return markup;
66
+ }
46
67
  });
47
68
  ```

2

タイトル変更

2017/02/19 08:56

投稿

sequence
sequence

スコア29

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

1

質問編集

2017/02/19 08:35

投稿

sequence
sequence

スコア29

title CHANGED
File without changes
body CHANGED
@@ -35,11 +35,13 @@
35
35
  cache: true,
36
36
 
37
37
  },
38
- templateResult:selectResult,
38
+ escapeMarkup: function (markup) {
39
+ console.log(markup);
40
+ return markup;
41
+ }, // let our custom formatter work
42
+ minimumInputLength: 1,
43
+ templateResult: formatRepo, // omitted for brevity, see the source of this page
44
+ templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
39
45
  });
40
-
41
- function selectResult(data){
42
- return data.name;
43
- }
44
46
  });
45
47
  ```