Hola chicos, estoy trabajando con Select2 con ajax, el problema es que los datos no se muestran en el menú desplegable cuando hago clic en la opción. Aparte de eso, cuando intento buscar algo específico. Los datos se procesan pero no se muestran en el menú desplegable. Revisé los datos en console.log() y se muestran correctamente antes o después de la búsqueda. Para obtener más detalles, compartiré mi código, eche un vistazo y avíseme el problema.

secuencia de comandos:

$(document).ready(function() {
      $('#user-list').select2({
        ajax: {
          url: "<?php echo base_url() . 'User_basic/fetch_mobile_numbers'; ?>",
          dataType: 'json',
          type: "post",
          delay: 250,
          data: function (params) {
           return {
             searchTerm: params.term // search term
           };
          },
          processResults: function (response) {
           console.log(response);
           return {
            results: response
          };
        },
       }
    });
 });

Vista:

<select name="phone_number" id="user-list" placeholder="Enter Number" class="form-control" multiple="multiple" required>
   <option value="" id="numbers-list"></option>
</select>

Ejemplo de respuesta JSON

[{"phone":"+924444444444"},
{"phone":"+926666666660"},
{"phone":"+92000000600"},
{"phone":"+923665588975"},
{"phone":"+929966557711"},
{"phone":"+92255663377"},
{"phone":"+921155775544"},
{"phone":"+925588665544"}]
0
Yasir Mehmood 16 oct. 2018 a las 15:51

2 respuestas

La mejor respuesta

La documentación en https://select2.org/data-sources/formats dice:

Select2 espera un formato de datos muy específico ... Cada objeto debe contener, como mínimo, una propiedad id y una propiedad text .

(Mi negrita)

Su objeto JSON no contiene ninguna de estas propiedades. Como tal, select2 no sabe qué hacer con la información que le está dando. No espera una propiedad de "teléfono" y no la buscará. Busca específicamente los campos mencionados en la documentación y nada más.

Los datos que le proporcione a select2 deben tener este aspecto:

[
  {"id": 1, "text":"+924444444444"},
  {"id": 2, "text":"+926666666660"},
  {"id": 3, "text":"+92000000600"},
  {"id": 4, "text":"+923665588975"},
  {"id": 5, "text":"+929966557711"},
  {"id": 6, "text":"+92255663377"},
  {"id": 7, "text":"+921155775544"},
  {"id": 8, "text":"+925588665544"}
]

Probablemente pueda lo que desee en el campo "id", pero debe estar allí y los valores deben ser únicos.

Lo ideal sería cambiar el código del lado del servidor para proporcionar el JSON en este formato directamente. Si por alguna razón eso no es posible, entonces tendrá que escribir algún código dentro de la función de JavaScript processResults para transformar los datos antes de pasarlos a select2.

1
ADyson 16 oct. 2018 a las 13:28

Intente hacer sus opciones de selección en el lado del controlador y envíe el html desde el controlador al archivo de vista y luego, en el lado de la vista, simplemente haga un div simple y dele ese html a ese div. Espero que esto te ayudará

-1
Ammar Mehr 16 oct. 2018 a las 13:29