Select2 Ajax方法未选择
好吧，我肯定这里有一些简单的设置错误，但我不是百分之百的。
因此，我尝试使用Select2 AJAX方法作为用户搜索数据库和选择结果的一种方式。调用本身返回结果，但是它不允许我从列表中选择答案。它似乎也不允许你在悬停或向上/向下箭头时“选择”它。因此，不再赘述，下面是我的代码：
index.html
<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>select.js
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
})
})JSON响应
{
error: null,
results: [
{
name: 'Some Name',
_id: 'Some Id'
},
{
name: 'Some Name',
_id: 'Some Id'
}
]
}一切似乎都是正确的，但是我无法实际选择答案并将其输入到框中。我的代码中有什么地方有问题吗？
回答 5
Stack Overflow用户
发布于 2013-02-12 04:37:05
在查看了another answer之后，似乎我还需要为每个调用传递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;
Stack Overflow用户
发布于 2015-03-10 23:37:07
处理这个案例时也要小心。我使用的是Id，但select2期望使用id。可以节省某人的时间。
Stack Overflow用户
发布于 2016-05-31 18:00:30
就像Dropped.on.Caprica说的:每个结果项都需要一个唯一的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
});https://stackoverflow.com/questions/14819865
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号