Ok, siento que me estoy volviendo loco aquí. Estoy usando el complemento select2 jquery (versión 4) y recuperando datos a través de ajax. Entonces puede escribir un nombre y le devolverá esa información de contacto. Pero también quiero regresar de qué organización forma parte ese contacto.
Aquí está mi inicialización select2:
$('#contact_id').select2({ ajax: { url: 'example.com/contacts/select', dataType: 'json', delay: 250, data: function (params) { return { q: params.term, page: params.page }; }, processResults: function (data) { return { results: data }; }, cache: true }, minimumInputLength: 3, maximumSelectionLength: 1 });Y aquí están los datos que estoy devolviendo (marco de laravel):
foreach($contacts as $con) { $results[] = [ 'id' => $con->contact_id, 'text' => $con->full_name, 'org' => [ 'org_id' => $con->organization_id, 'org_name' => $con->org_name ] ]; } return response()->json($results); Entonces, ¿no se supone que 'org' debe adjuntarse a la opción creada o al elemento seleccionado por select2? Así que podría hacer algo como $('#contact_id').select2().find(':selected').data('data').org o $('#contact_id').select2().data('data').org o algo así?
Idealmente, esto se vería así:
<select> <option value="43" data-org="{org_id:377, org_name:'Galactic Empire'}">Darth Vader</option> </select>Juro que confirmé que esto funcionó la semana pasada, pero ahora está ignorando por completo esa propiedad de la organización. He confirmado que los datos json que se devuelven incluyen org con el org_id y org_name adecuados. No he podido desenterrar nada en línea, solo este fragmento de documentación :
Las propiedades id y text son necesarias en cada objeto, y estas son las propiedades que utiliza Select2 para los objetos de datos internos. Cualquier parámetro adicional que se pase con los objetos de datos se incluirá en los objetos de datos que expone Select2.
Entonces, ¿alguien puede ayudarme con esto? Ya he perdido un par de horas en esto.
EDITAR: Como no he recibido ninguna respuesta, mi plan actual es usar la devolución de llamada de processResults para generar campos de entrada ocultos o bloques JSON a los que haré referencia más adelante en mi código. Siento que esta es una solución hacky dada la situación, pero si no hay otra manera, eso es lo que haré. Prefiero eso que hacer otra llamada ajax para obtener la organización. Cuando llegue a implementarlo, publicaré mi solución.
No puedo comentar por ahora (baja reputación)... así que... respondiendo a slick:
Incluyendo datos adicionales (v4.0):
processResults: function (data) { data = data.map(function (item) { return { id: item.id_field, text: item.text_field, otherfield: item.otherfield }; }); return { results: data }; }Lectura de los datos:
var data=$('#contact_id').select2('data')[0]; console.log(data.otherfield);No puedo recordar lo que estaba haciendo mal, pero con processResults(data) , los datos contienen la respuesta completa. En mi implementación a continuación, accedo a esta información cuando se selecciona un elemento:
$('#select2-box').select2({ placeholder: 'Search Existing Contacts', ajax: { url: '/contacts/typeahead', dataType: 'json', delay: 250, data: function(params){ return { q: params.term, type: '', suggestions: 1 }; }, processResults: function(data, params){ //Send the data back return { results: data }; } }, minimumInputLength: 2 }).on('select2:select', function(event) { // This is how I got ahold of the data var contact = event.params.data; // contact.suggestions ... // contact.organization_id ... }); // Data I was returning [ { "id":36167, // ID USED IN SELECT2 "avatar":null, "organization_id":28037, "text":"John Cena - WWE", // TEXT SHOWN IN SELECT2 "suggestions":[ { "id":28037, "text":"WWE", "avatar":null }, { "id":21509, "text":"Kurt Angle", "avatar":null }, { "id":126, "text":"Mark Calaway", "avatar":null }, { "id":129, "text":"Ricky Steamboat", "avatar":null }, { "id":131, "text":"Brock Lesnar", "avatar":null } ] } ]