わかりました、ここには何か簡単な設定が間違っていると思いますが、100%ではありません。
だから私は Select2 AJAXメソッドをユーザーがデータベースを検索して結果を選択する方法として使用しようとしています。呼び出し自体は結果を返しますが、リストから回答を選択することはできません。また、ホバーまたは上/下矢印で「選択」することも許可されていないようです。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" />
<script src="select2/select2.js"></script>
<script src="select.js"></script>
</head>
<body>
<input type="text" style="width: 500px" class="select2">
</body>
</html>
jQuery(function() {
var formatSelection = function(bond) {
console.log(bond)
return bond.name
}
var formatResult = function(bond) {
return '<div class="select2-user-result">' + bond.name + '</div>'
}
var initSelection = function(elem, cb) {
console.log(elem)
return elem
}
$('.select2').select2({
placeholder: "Policy Name",
minimumInputLength: 3,
multiple: false,
quietMillis: 100,
ajax: {
url: "http://localhost:3000/search",
dataType: 'json',
type: 'POST',
data: function(term, page) {
return {
search: term,
page: page || 1
}
},
results: function(bond, page) {
return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
}
},
formatResult: formatResult,
formatSelection: formatSelection,
initSelection: initSelection
})
})
{
error: null,
results: [
{
name: 'Some Name',
_id: 'Some Id'
},
{
name: 'Some Name',
_id: 'Some Id'
}
]
}
すべてが正しく引き込まれるように見えますが、実際に答えを選択してボックスに入力させることはできません。コードのどこかに問題がありますか?
別の回答 を見た後、すべての呼び出しでidフィールドも渡す必要があるように見えます。そうしないと、入力が無効になります。
それを修正したサンプルコード:
$('.select2').select2({
placeholder: "Policy Name",
minimumInputLength: 3,
multiple: false,
quietMillis: 100,
id: function(bond){ return bond._id; },
ajax: {
url: "http://localhost:3000/search",
dataType: 'json',
type: 'POST',
data: function(term, page) {
return {
search: term,
page: page || 1
}
},
results: function(bond, page) {
return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
}
},
formatResult: formatResult,
formatSelection: formatSelection,
initSelection: initSelection
})
これは支持され続けるので、少し詳しく説明します。 .select2()メソッドでは、すべての結果に一意のid
フィールドが必要です。ありがたいことに、回避策があります。 id
オプションは、次のような関数を受け入れます。
function( <INDIVIDUAL_RESULT> ) {
// Expects you to return a unique identifier.
// Ideally this should be from the results of the $.ajax() call.
}
私の一意の識別子は<RESULT>._id
、私は単にreturn <RESULT>._id;
問題は、JSONデータに「id」というプロパティが必要なことです。必要はありません
id:function(bond){return bond._id;}
データにそれ自体のIDがない場合は、次のようにprocessResultsの関数で追加できます。
$(YOUR FIELD).select2({
placeholder: "Start typing...",
ajax: {
type: "POST",
contentType: "application/json; charset=utf-8",
url: "YOUR API ENDPOINT",
dataType: 'json',
data:
function (params) {
return JSON.stringify({ username: params.term });
},
processResults: function (data, page) {
var results = [];
$.each(JSON.parse(data.d), function (i, v) {
var o = {};
o.id = v.key;
o.name = v.displayName;
o.value = v.key;
results.Push(o);
})
return {
results: results
};
},
cache: true
},
escapeMarkup: function (markup) { return markup;},
minimumInputLength: 1,
templateResult: function (people) {
if (people.loading)
return people.text;
var markup = '<option value="' + people.value + '">' + people.name + '</option>';
return markup;
},
templateSelection: function (people) { return people.value || people.text }
});
ケースにも注意してください。 Id
を使用していましたが、select2ではid
が必要です。誰かの時間を節約できます。
Like Dropped.on.Caprica said:すべての結果アイテムには一意のIDが必要です。
したがって、すべての結果id
に一意の番号を割り当てるだけです。
$('#searchDriver').select2({
ajax: {
dataType: 'json',
delay: 250,
cache: true,
url: '/users/search',
processResults: function (data, params) {
//data is an array of results
data.forEach(function (d, i) {
//Just assign a unique number or your own unique id
d.id = i; // or e.id = e.userId;
})
return {
results: data
};
},
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
私は次のエラーに関する多くの問題を抱えていますSelect 'ajax'はSelect2では許可されていません
私の場合、select2バージョン3.5を使用しているときにselectに表示されます。したがって、バージョン4.0にアップグレードする必要があり、selectに非表示の入力を追加する必要はありません
select2
要素をプログラムで開いてからreturn
キーを押すと、オプション(この場合は最初のオプション)の選択をトリガーできます。
var e = jQuery.Event('keydown');
e.which = 13;
$('.offer_checkout_page_link select').select2('open');
$('.offer_checkout_page_link .select2-selection').trigger(e);
これは、クリックしたかのようにオプションを「設定」します。これを変更して、down
キーを押す前に適切な回数のreturn
キーを押すことにより、特定のオプションを選択できます。
オプションを選択するためにクリック(または、この場合はenter
を押す)すると、オプション要素がselect要素に追加されるように見えます。ページが最初にロードされるときに、select2
select要素にはoption
要素の子がありません。これが、jQueryを使用してオプション要素を追加してから選択することを他のソリューションが提案する理由です。