Select2 Ajax Method Not Selecting
Хорошо, я уверен, что здесь что-то не так просто, но я не на 100%, что это такое.
Поэтому я пытаюсь использовать метод 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'
}
]
}
Кажется, что все в порядке, но я не могу на самом деле выбрать ответ и ввести его в поле. Есть ли проблема в моем коде?
Ответы
Ответ 1
После просмотра еще одного ответа казалось бы, мне нужно также пройти поле 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;
Ответ 2
Дело в том, что для данных JSON требуется свойство "id". Нет необходимости в
id: function (bond) {return bond._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 }
});
Ответ 3
Также будьте осторожны с корпусом. Я использовал Id
, но select2 ожидает Id
. Могли бы сэкономить время.
Ответ 4
Как Dropped.on.Caprica сказал: Каждому элементу результата нужен уникальный идентификатор.
Поэтому просто присвойте каждому результату 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
});
Ответ 5
У меня много проблем относительно следующей ошибки
Параметр 'ajax' не разрешен для Select2
В моем случае появляется для выбора, когда вы используете select2 version 3.5,
Поэтому вы должны перейти на версию 4.0, и вам не понадобится скрытый ввод, прикрепленный к вашему выбору
Ответ 6
![введите описание изображения здесь]()
Вы можете вызвать выбор опции (в этом случае первый), открыв элемент 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
элементы выбора не имеют дочерних элементов option
. Вот почему другие решения предлагают добавить элемент option с помощью jQuery и затем выбрать его.