質問編集履歴
7
質問変更
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
質問変更
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
|

|
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
質問変更
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
|
-
|
24
|
+
url: "https://api.github.com/search/repositories",
|
23
|
-
type:"POST",
|
24
|
-
|
25
|
+
dataType: 'json',
|
26
|
+
delay: 250,
|
25
|
-
|
27
|
+
data: function (params) {
|
26
|
-
|
28
|
+
return {
|
29
|
+
q: params.term, // search term
|
27
|
-
|
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
|
-
|
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
質問追加
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
質問変更
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
タイトル変更
title
CHANGED
@@ -1,1 +1,1 @@
|
|
1
|
-
jQueryのプラグイン(Select2)がうまく動作しません。
|
1
|
+
jQueryのプラグイン(Select2)がうまく動作しません。
|
body
CHANGED
File without changes
|
1
質問編集
title
CHANGED
File without changes
|
body
CHANGED
@@ -35,11 +35,13 @@
|
|
35
35
|
cache: true,
|
36
36
|
|
37
37
|
},
|
38
|
-
|
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
|
```
|