Buen dia
Tengo un ajax que me consulta una lista de maquinas que estas relacionadas con unos productos esto funciona perfectamente pero hay relaciones que tienen muchos registros y esto se hace tedioso al momento de buscar investigando encontre select2 al implementarlo en un select normal o sea con los datos escritos en los option dentro del html perfecto pero no he podido implementarlo en la consulta de ajax
Blade
<div class="container-fluid">
<div class="form-row">
<div class="col-xs-12 col-sm-5">
<div class="form-group label-floating">
<label class="control-label">Maquina</label>
<select class="form-control selector " id="maquina" name="maquina" required>
<option value=""></option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-5">
<div class="form-group label-floating">
<label class="control-label">Producto/tamaño</label>
<select class="form-control slector " id="id_producto" name="id_producto" required>
</select>
</div>
</div>
Estos son los dos select hay en class tengo "mi-selector" para el script de select2 AJAX
$(document).ready(function() {
// asignar los select a las variables
var plantSelect = $('#maquina');
var areaSelect = $('#id_producto');
// obteniendo las maquinas y llenando el select
function populatePlantSelect() {
$.ajax({
url: "{{ route('getmaquinas') }}",
type: 'GET',
dataType: 'json',
success: function(response) {
$.each(response.data, function(key, value) {
plantSelect.append("" + value.nombre_maquina + "");
});
},
error: function() {
alert('Hubo un error obteniendo las maquinas!');
}
});
}
populatePlantSelect();
// indica la maquina y lista los productos asignados a esa maquina
plantSelect.change(function() {
var plantId = $(this).val();
areaSelect.empty();
if (plantId) {
$.ajax({
url: "{{ route('getproducto') }}",
type: 'GET',
data: {
maquina: plantId
},
dataType: 'json',
success: function(response) {
areaSelect.append('') $.each(response.data, function(key, value) {
areaSelect.append("" + value.codigo + '__' + value.productos + "");
});
$('.mi-selector').select2();
},
error: function() {
alert('Hubo un error obteniendo los productos!');
}
});
}
});
//despues de selecionar le producto asigna codigo de producto para llenar campo de la imagen y cargar
});
JS
$(document).ready(function($){
$(document).ready(function() {
$('.mi-selector').select2();
});
});
Se supone que con esto implementa la libreria select 2
Gracias de antemano
success
despues de tu iteracion pon la linea del select2$('.mi-selector').select2();
<input class="form-control text-center mi-selector" ...>
son de tipo texto ySelect2
, por definición, es solo aplicable a<select ..>