質問編集履歴

7 質問変更

sequence

sequence score 29

2017/02/20 20:09  投稿
jQueryのプラグイン（Select2）がうまく動作しません。
## やりたいこと
Select2というライブラリを用いて、
テキストボックスにテキストを入力したら、
ajaxを使って非同期で検索を行い、
検索結果をSelectBoxで一覧表示。
その後、選択をしたいです。
イメージとしては
[https://select2.github.io/examples.html#tags](https://select2.github.io/examples.html#tags)のLoading Remote Dataの処理をさせたいです。
## 現状
ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
それを一覧で表示させるところまではできております。
問題はその一覧を選択できずフォーカスも当たりません。
![イメージ説明](ad3f5f49c66aa831895c8700d3692fd1.png)
オプションに問題があるとは思うのですが、
ドキュメントや他の人の実装を見てもわからなかったので、どこがおかしいのかご教授お願い致します。
下記のコードは[サンプル](https://select2.github.io/examples.html#tags)を参考にしています。
こちらでは問題なく動作が行われます。
```
   $(".s-select").select2({
       ajax: {
           url: "https://api.github.com/search/repositories",
           dataType: 'json',
           delay: 250,
           data: function (params) {
             return {
               q: params.term, // search term
               page: params.page
             };
           },
           processResults: function (data, params) {
               console.log(data.items);
               
             return {
               results: data.items,
             };
           },
           cache: true
         },
         escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
         minimumInputLength: 1,
         templateResult: formatRepo, // omitted for brevity, see the source of this page
   });
         function formatRepo(repo){
             var markup = "<div class='select2-result-repository clearfix'>" + repo + "</div>";
               return markup;
         }
});
```
一方こちらのコードが表示結果が選択できず、フォーカスも当たりません。
```
ajax: {
           method:"POST",
           url: "/company/select",
           dataType: 'json',
           data: function (params) {
               return {
                   companyName: params.term, // search term
               };
           },
           processResults: function (data, params) {
               console.log(data)
               return {
                   results: data,
               };
           },
           cache: true
       },
       escapeMarkup: function (markup) {
           console.log(markup);
           return markup;
       }, // let our custom formatter work
       minimumInputLength: 1,
       templateResult: formatRepo, // omitted for brevity, see the source of this page
       templateSelection:formatRepoSelection,  
   });
   function formatRepo (repo) {
       var markup = "<div class='select2-result-repository clearfix'>" + repo.companyName + "</div>";
       return markup;
   }
   function formatRepoSelection(repo){  
       return repo;  
   }  
```
違いは、GETかPOSTかの違いだけかと思っております。
お力添えの程、宜しく御願い致します。
  • jQuery

    10770 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
6 質問変更

sequence

sequence score 29

2017/02/20 15:39  投稿
jQueryのプラグイン（Select2）がうまく動作しません。
## やりたいこと
Select2というライブラリを用いて、
テキストボックスにテキストを入力したら、
ajaxを使って非同期で検索を行い、
検索結果をSelectBoxで表示させたいです。
検索結果をSelectBoxで一覧表示。
その後、選択をしたいです。
イメージとしては
[https://select2.github.io/examples.html#tags](https://select2.github.io/examples.html#tags)のLoading Remote Dataの処理をさせたいです。
## 現状
ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
それを一覧で表示させるところまではできているのですが、
その一覧を選択できない（カーソルとカーソルキーどちらも）状態です。
それを一覧で表示させるところまではできております。
問題はその一覧を選択できずフォーカスも当たりません。
![イメージ説明](ad3f5f49c66aa831895c8700d3692fd1.png)
オプションに問題があるとは思うのですが、
ドキュメントや他の人の実装を見てもわからなかったので、どこがおかしいのかご教授お願い致します。
下記のコードは[サンプル](https://select2.github.io/examples.html#tags)を参考にしています。
こちらでは問題なく動作が行われます。
```
   $(".s-select").select2({
       ajax: {
           url: "https://api.github.com/search/repositories",
           dataType: 'json',
           delay: 250,
           data: function (params) {
             return {
               q: params.term, // search term
               page: params.page
             };
           },
           processResults: function (data, params) {
               console.log(data.items);
               
             return {
               results: data.items,
             };
           },
           cache: true
         },
         escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
         minimumInputLength: 1,
         templateResult: formatRepo, // omitted for brevity, see the source of this page
   });
         function formatRepo(repo){
             var markup = "<div class='select2-result-repository clearfix'>" + repo + "</div>";
               return markup;
         }
});
```
一方こちらでは動画が上手くいきません。
一方こちらのコードが表示結果が選択できず、フォーカスも当たりません。
```
ajax: {
           method:"POST",
           url: "/company/select",
           dataType: 'json',
           data: function (params) {
               return {
                   companyName: params.term, // search term
               };
           },
           processResults: function (data, params) {
               console.log(data)
               return {
                   results: data,
               };
           },
           cache: true
       },
       escapeMarkup: function (markup) {
           console.log(markup);
           return markup;
       }, // let our custom formatter work
       minimumInputLength: 1,
       templateResult: formatRepo, // omitted for brevity, see the source of this page
   });
   function formatRepo (repo) {
       var markup = "<div class='select2-result-repository clearfix'>" + repo.companyName + "</div>";
       return markup;
   }
```
違いは、GETかPOSTかの違いだけかと思っております。
お力添えの程、宜しく御願い致します。
  • jQuery

    10770 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
5 質問変更

sequence

sequence score 29

2017/02/20 12:28  投稿
jQueryのプラグイン（Select2）がうまく動作しません。
## やりたいこと
Select2というライブラリを用いて、
テキストボックスにテキストを入力したら、
ajaxを使って非同期で検索を行い、
検索結果をSelectBoxで表示させたいです。
イメージとしては
https://select2.github.io/examples.html#tagsのLoading Remote Dataの処理をさせたいです。
[https://select2.github.io/examples.html#tags](https://select2.github.io/examples.html#tags)のLoading Remote Dataの処理をさせたいです。
## 現状
ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
それを一覧で表示させるところまではできているのですが、
その一覧を選択できない（カーソルとカーソルキーどちらも）状態です。
![イメージ説明](ad3f5f49c66aa831895c8700d3692fd1.png)
オプションに問題があるとは思うのですが、
ドキュメントや他の人の実装を見てもわからなかったので、どこがおかしいのかご教授お願い致します。
 
下記のコードは[サンプル](https://select2.github.io/examples.html#tags)を参考にしています。  
こちらでは問題なく動作が行われます。  
```
$(function(){  
   $(".s-select").select2({
       ajax:{
           url:"/select",
           type:"POST",
           dataType:"json",
           data:function(params){
               return{
                   data:params.term
               }
       ajax: {
           url: "https://api.github.com/search/repositories",
           dataType: 'json',
           delay: 250,
           data: function (params) {
             return {
               q: params.term, // search term
               page: params.page
             };
           },
           processResults: function (data, params) {
               console.log(data.items);
               
             return {
               results: data.items,
             };
           },
           cache: true
         },
         escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
         minimumInputLength: 1,
         templateResult: formatRepo, // omitted for brevity, see the source of this page
   });
         function formatRepo(repo){
             var markup = "<div class='select2-result-repository clearfix'>" + repo + "</div>";
               return markup;
         }
});
```
一方こちらでは動画が上手くいきません。
```
ajax: {
           method:"POST",
           url: "/company/select",
           dataType: 'json',
           data: function (params) {
               return {
                   companyName: params.term, // search term
               };
           },
           processResults: function (data, params) {
               console.log(data)  
               return {
                   results: data,
               };
           },
           cache: true,
           
           cache: true
       },
       escapeMarkup: function (markup) {
           console.log(markup);
           return markup;
       }, // let our custom formatter work
       minimumInputLength: 1,
       templateResult: formatRepo, // omitted for brevity, see the source of this page
       templateSelection: formatRepoSelection // omitted for brevity, see the source of this page  
   });
   function formatRepo (repo) {
       var markup = "<div class='select2-result-repository clearfix'>" +
       "<div class='select2-result-repository__avatar'></div>" +
       "<div class='select2-result-repository__meta'>" +
       "<div class='select2-result-repository__title'>" + repo.data + "</div>";
       if (repo.description) {
           markup += "<div class='select2-result-repository__description'>" + repo.data + "</div>";
       }
       markup += "<div class='select2-result-repository__statistics'>" +
       "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.data + " Forks</div>" +
       "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.data + " Stars</div>" +
       "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.data + " Watchers</div>" +
       "</div>" +
       "</div></div>";
       var markup = "<div class='select2-result-repository clearfix'>" + repo.companyName + "</div>";
       return markup;
   }
function formatRepoSelection (repo) {
       return repo.full_name || repo.text;
   }
});
```
```
違いは、GETかPOSTかの違いだけかと思っております。
お力添えの程、宜しく御願い致します。
  • jQuery

    10770 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
4 質問追加

sequence

sequence score 29

2017/02/19 18:05  投稿
jQueryのプラグイン（Select2）がうまく動作しません。
## やりたいこと
Select2というライブラリを用いて、
テキストボックスにテキストを入力したら、
ajaxを使って非同期で検索を行い、
検索結果をSelectBoxで表示させたいです。
イメージとしては
https://select2.github.io/examples.html#tagsのLoading Remote Dataの処理をさせたいです。
## 現状
ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
それを一覧で表示させるところまではできているのですが、
その一覧を選択できない（カーソルとカーソルキーどちらも）状態です。
![イメージ説明](ad3f5f49c66aa831895c8700d3692fd1.png)
オプションに問題があるとは思うのですが、
ドキュメントや他の人の実装を見てもわからなかったので、どこがおかしいのかご教授お願い致します。
```
$(function(){
   $(".s-select").select2({
       ajax:{
           url:"/select",
           type:"POST",
           dataType:"json",
           data:function(params){
               return{
                   data:params.term
               }
           },
           processResults: function (data, params) {
               return {
                   results: data,
               };
           },
           cache: true,
           
       },
       escapeMarkup: function (markup) {
           console.log(markup);
           return markup;
       }, // let our custom formatter work
       minimumInputLength: 1,
       templateResult: formatRepo, // omitted for brevity, see the source of this page
       templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
   });
   function formatRepo (repo) {
       var markup = "<div class='select2-result-repository clearfix'>" +
       "<div class='select2-result-repository__avatar'></div>" +
       "<div class='select2-result-repository__meta'>" +
       "<div class='select2-result-repository__title'>" + repo.data + "</div>";
       if (repo.description) {
           markup += "<div class='select2-result-repository__description'>" + repo.data + "</div>";
       }
       markup += "<div class='select2-result-repository__statistics'>" +
       "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.data + " Forks</div>" +
       "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.data + " Stars</div>" +
       "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.data + " Watchers</div>" +
       "</div>" +
       "</div></div>";
       return markup;
   }
function formatRepoSelection (repo) {  
       return repo.full_name || repo.text;  
   }  
});
```
  • jQuery

    10770 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
3 質問変更

sequence

sequence score 29

2017/02/19 17:56  投稿
jQueryのプラグイン（Select2）がうまく動作しません。
## やりたいこと
Select2というライブラリを用いて、
テキストボックスにテキストを入力したら、
ajaxを使って非同期で検索を行い、
検索結果をSelectBoxで表示させたいです。
イメージとしては
https://select2.github.io/examples.html#tagsのLoading Remote Dataの処理をさせたいです。
## 現状
ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
それを一覧で表示させるところまではできているのですが、
その一覧を選択できない（カーソルとカーソルキーどちらも）状態です。
![イメージ説明](ad3f5f49c66aa831895c8700d3692fd1.png)
オプションに問題があるとは思うのですが、
ドキュメントや他の人の実装を見てもわからなかったので、どこがおかしいのかご教授お願い致します。
```
$(function(){
   $(".s-select").select2({
       ajax:{
           url:"/select",
           type:"POST",
           dataType:"json",
           data:function(params){
               return{
                   data:params.term
               }
           },
           processResults: function (data, params) {
               return {
                   results: data,
               };
           },
           cache: true,
           
       },
       escapeMarkup: function (markup) {
           console.log(markup);
           return markup;
       }, // let our custom formatter work
       minimumInputLength: 1,
       templateResult: formatRepo, // omitted for brevity, see the source of this page
       templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
   });
 
   function formatRepo (repo) {  
 
       var markup = "<div class='select2-result-repository clearfix'>" +  
       "<div class='select2-result-repository__avatar'></div>" +  
       "<div class='select2-result-repository__meta'>" +  
       "<div class='select2-result-repository__title'>" + repo.data + "</div>";  
 
       if (repo.description) {  
           markup += "<div class='select2-result-repository__description'>" + repo.data + "</div>";  
       }  
 
       markup += "<div class='select2-result-repository__statistics'>" +  
       "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.data + " Forks</div>" +  
       "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.data + " Stars</div>" +  
       "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.data + " Watchers</div>" +  
       "</div>" +  
       "</div></div>";  
 
       return markup;  
   }  
});
```
  • jQuery

    10770 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
2 タイトル変更

sequence

sequence score 29

2017/02/19 17:35  投稿
jQueryのプラグイン（Select2）がうまく動作しません。（パート2）
jQueryのプラグイン（Select2）がうまく動作しません。
## やりたいこと
Select2というライブラリを用いて、
テキストボックスにテキストを入力したら、
ajaxを使って非同期で検索を行い、
検索結果をSelectBoxで表示させたいです。
イメージとしては
https://select2.github.io/examples.html#tagsのLoading Remote Dataの処理をさせたいです。
## 現状
ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
それを一覧で表示させるところまではできているのですが、
その一覧を選択できない（カーソルとカーソルキーどちらも）状態です。
![イメージ説明](ad3f5f49c66aa831895c8700d3692fd1.png)
オプションに問題があるとは思うのですが、
ドキュメントや他の人の実装を見てもわからなかったので、どこがおかしいのかご教授お願い致します。
```
$(function(){
$(".s-select").select2({
ajax:{
url:"/select",
type:"POST",
dataType:"json",
data:function(params){
return{
data:params.term
}
},
processResults: function (data, params) {
return {
results: data,
};
},
cache: true,
},
escapeMarkup: function (markup) {
console.log(markup);
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
});
```
  • jQuery

    10770 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
1 質問編集

sequence

sequence score 29

2017/02/19 17:10  投稿
jQueryのプラグイン（Select2）がうまく動作しません。（パート2）
## やりたいこと
Select2というライブラリを用いて、
テキストボックスにテキストを入力したら、
ajaxを使って非同期で検索を行い、
検索結果をSelectBoxで表示させたいです。
イメージとしては
https://select2.github.io/examples.html#tagsのLoading Remote Dataの処理をさせたいです。
## 現状
ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
それを一覧で表示させるところまではできているのですが、
その一覧を選択できない（カーソルとカーソルキーどちらも）状態です。
![イメージ説明](ad3f5f49c66aa831895c8700d3692fd1.png)
オプションに問題があるとは思うのですが、
ドキュメントや他の人の実装を見てもわからなかったので、どこがおかしいのかご教授お願い致します。
```
$(function(){
   $(".s-select").select2({
       ajax:{
           url:"/select",
           type:"POST",
           dataType:"json",
           data:function(params){
               return{
                   data:params.term
               }
           },
           processResults: function (data, params) {
               return {
                   results: data,
               };
           },
           cache: true,
           
       },
       templateResult:selectResult,
       escapeMarkup: function (markup) {
           console.log(markup);
           return markup;
       }, // let our custom formatter work
       minimumInputLength: 1,
       templateResult: formatRepo, // omitted for brevity, see the source of this page
       templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
   });
 
   function selectResult(data){  
       return data.name;  
   }  
});
```
  • jQuery

    10770 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る