質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery

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

Q&A

0回答

3604閲覧

jQueryのプラグイン(Select2)がうまく動作しません。

sequence

総合スコア29

jQuery

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

0グッド

0クリップ

投稿2017/02/17 13:49

編集2017/02/20 11:09

やりたいこと

Select2というライブラリを用いて、
テキストボックスにテキストを入力したら、
ajaxを使って非同期で検索を行い、
検索結果をSelectBoxで一覧表示。
その後、選択をしたいです。

イメージとしては
https://select2.github.io/examples.html#tagsのLoading Remote Dataの処理をさせたいです。

現状

ajaxを用いて、リクエストを送り、それに対してのレスポンスは返ってきており、
それを一覧で表示させるところまではできております。
問題はその一覧を選択できずフォーカスも当たりません。
イメージ説明

オプションに問題があるとは思うのですが、
ドキュメントや他の人の実装を見てもわからなかったので、どこがおかしいのかご教授お願い致します。

下記のコードはサンプルを参考にしています。
こちらでは問題なく動作が行われます。

$(".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かの違いだけかと思っております。
お力添えの程、宜しく御願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2017/02/19 08:48

formatRepo の定義をご提示ください。
退会済みユーザー

退会済みユーザー

2017/02/19 09:00

不具合を回答者が手元で再現できるようなミニマムコードを提示してください。
yag

2017/02/20 06:25

一覧で選択した値がセットされず空白のまま…ということで宜しいですかね?そもそもフォーカスすら当たらない?とりあえずtemplateSelectionの実装を追記お願い致します。
sequence

2017/02/20 06:32

yagさん> そもそもフォーカスが当たりません。サンプルの方もtemplateSelectionの実装をせずともフォーカスが当たっておりましたので、実装をしておりませんでした。templateSelectionは必須なのでしょうか?
yag

2017/02/20 06:35

こちらでサンプル作ってみましたところ、値をセレクトボックスにセットする為にはformatRepoSelectionが必要なようです。恐らくですがそれで解決する気もしますので試してみてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問