javascript - change - Select2 Método Ajax sin seleccionar
select2 refresh (6)
Ok, estoy seguro de que hay algo simple que está mal aquí, pero no soy 100% lo que es.
Así que estoy tratando de usar el método Select2 AJAX como una forma de que los usuarios busquen en una base de datos y seleccionen un resultado. La llamada en sí misma está regresando con resultados, sin embargo, no me permitirá seleccionar la respuesta de la lista. Tampoco parece que le permita "seleccionarlo" al pasar el mouse o hacia arriba o hacia abajo. Así que sin más preámbulos, aquí está mi código:
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
})
})
Respuesta JSON
{
error: null,
results: [
{
name: ''Some Name'',
_id: ''Some Id''
},
{
name: ''Some Name'',
_id: ''Some Id''
}
]
}
Todo parece funcionar correctamente, sin embargo, no puedo seleccionar la respuesta y hacer que ingrese en la caja. ¿Hay algún problema en mi código?
Al igual que Dropped.on.Caprica dijo: Cada elemento de resultados necesita una identificación única.
Así que solo asigne a cada id resultado un número único:
$(''#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
});
Después de mirar otra respuesta , parece que también necesito pasar el campo de identificación con cada llamada, de lo contrario, deshabilitará la entrada.
Código de muestra que lo solucionó:
$(''.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
})
Editar
Como esto sigue siendo votado, elaboraré un poco. El método .select2 () espera un campo de id único en todos los resultados. Afortunadamente, hay una solución. La opción id acepta una función como esta:
function( <INDIVIDUAL_RESULT> ) {
// Expects you to return a unique identifier.
// Ideally this should be from the results of the $.ajax() call.
}
Como mi identificador único era <RESULT>._id , simplemente return <RESULT>._id;
Lo que pasa es que los datos JSON necesitan una propiedad llamada "id". No hay necesidad de
id: function (bond) {return bond._id; }
Si los datos no tienen un id para sí mismo, puede agregarlo con una función en processResults como aquí.
$(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 }
});
También ten cuidado con el caso. Estaba usando Id pero select2 espera id . Podría salvarle el tiempo a alguien.
Tengo muchos problemas con respecto al siguiente error La opción ''ajax'' no está permitida para Select2
En mi caso, aparece para seleccionar cuando está utilizando select2 versión 3.5, por lo que debe actualizar a la versión 4.0 y no necesitará una entrada oculta adjunta a su selección
Puede activar la selección de una opción (en este caso la primera) abriendo el elemento select2 programación y luego activando una tecla de return .
var e = jQuery.Event(''keydown'');
e.which = 13;
$(''.offer_checkout_page_link select'').select2(''open'');
$(''.offer_checkout_page_link .select2-selection'').trigger(e);
Esto "configurará" la opción como si hicieras clic en ella. Puede modificar esto para seleccionar una opción específica activando la cantidad adecuada de pulsaciones de tecla down antes de activar la de return .
Parece que, al hacer clic (o en este caso presionar enter ) para seleccionar una opción, se agrega un elemento de opción al elemento de selección. Notarás que cuando la página carga primero select2 los elementos seleccionados no tienen ningún elemento option . Esta es la razón por la cual otras soluciones sugieren agregar un elemento de opción usando jQuery y luego seleccionarlo.