Select2をAjaxを使用するようにセットアップしようとしていますが、行き詰まっています。IEでデバッグし、AJAXが結果を返すことを確認したので、問題はないようです。入力ボックスは読み込まれますが、「milk」に「mi」と入力すると、「searching ...」と表示され、何も見つかりません。
これが私のJqueryです：
$(document).ready(function () {
$('#e1').select2({
placeholder: "Select an ingredient...",
minimumInputLength: 2,
ajax: {
url: "../api/IngredientChoices",
dataType: "jsonp",
quietMillis: 500,
data: function (term, page) {
return {
q: term,
page_limit: 10,
page: page
};
},
results: function (data, page) {
var more = (page * 10) < data.total;
return {
results: data.MainName, more:more
}
}
}
});
});
JSON：
[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]
HTML：
<td><input type="hidden" id="e1" /></td>
dataTypeをjsonだけに変更すると、ボックスに「mi」と入力したときに別の種類のエラーが発生します。
作業バージョンの最終的なコードは次のとおりです。
$('#e1').select2({
placeholder: "Select an ingredient...",
minimumInputLength: 2,
ajax: {
url: "../api/IngredientChoices",
dataType: "json",
quietMillis: 500,
data: function (term, page) {
return {
q: term,
page_limit: 10,
page: page
};
},
results: function (data, page) {
var more = (page * 10) < data.length;
console.log(more);
console.log(data);
return { results: data, more: more };
},
formatResult: function (post) {
markup = '<strong>' + post.text + '</strong>';
}
}
});