【发布时间】:2013-01-09 01:44:56
【问题描述】:
我正在尝试将 Select2 设置为使用 Ajax,但我被卡住了。我已经在 IE 中调试并确认我的 AJAX 正在返回结果,所以这似乎不是问题。输入框会加载,但是当我在“牛奶”中输入“mi”时,它只会说“正在搜索...”,但从来没有找到任何东西!
这是我的 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>';
}
}
});
【问题讨论】:
-
jsonp 用于传出 ajax 调用.../api/IngredientChoices 是您的本地 url?那么我认为您只需要数据类型 json
-
啊,我不确定 JSON 和 JSONP 之间的区别。使用 JSON,我仍然在我附加的屏幕截图中收到错误。
标签: ajax json jquery jquery-select2