选择二阿贾克斯方法不选择 [英] Select2 Ajax Method Not Selecting
问题描述
好吧，我敢肯定，有一些简单的设置错在这里，但我不是100％，它是什么。
Ok, I'm sure there's something simple set wrong here but I'm not 100% what it is.
所以，我想使用选择二 AJAX方法，用户的方式来搜索数据库，并选择结果。本身回来与结果的通话，但它不会让我从列表中选择答案。这也似乎并没有让你悬停或向上/向下箭头选择了。因此，事不宜迟，这里是我的code：
So I am trying to use Select2 AJAX method as a way of users to search a database and select a result. The call itself is coming back with results, however it will not allow me to select the answer from the list. It also doesn't seem to allow you to "select" it on hover or up/ down arrow. So without further ado, here is my code:
<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'
}
]
}
一切似乎都正确地拉进来，但是我不能真正选择答案，并把它输入到对话框。是否有问题的地方在我的code？
Everything seems to pull in correctly, however I am unable to actually select the answer and have it input into the box. Is there a problem somewhere in my code?
推荐答案
在看<一href="http://stackoverflow.com/questions/14193463/an-event-is-interfering-with-select2-plugins-ajax-retrieved-results">another答案它似乎我还需要通过id字段与每一个电话，否则将禁止输入。
After looking at another answer it would seem I need to also pass id field with every call, otherwise it will disable the input.
样品code是固定的：
Sample code that fixed it:
$('.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
})
修改
由于这个不断得到upvoted我会详细一点。该.select2（）方法需要对所有结果独特的 ID 字段。值得庆幸的是，有一个变通方法。该 ID 选项接受一个函数是这样的：
Edit
Since this keeps getting upvoted I'll elaborate a bit. The .select2() method expects a unique id field on all results. Thankfully, there's a workaround. The id option accepts a function like this:
function( <INDIVIDUAL_RESULT> ) {
// Expects you to return a unique identifier.
// Ideally this should be from the results of the $.ajax() call.
}
由于我的唯一标识是＆LT;结果＆GT; ._ ID ，我只是返回＆lt;结果＆GT; ._ ID;
这篇关于选择二阿贾克斯方法不选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
