estoy intentado hacer un buscador para un select, ya que el Select contiene mucha información y es molesto estar buscando la opción necesaria.
conseguí hacer que funcionara con Bootstap en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<title></title>
</head>
<body>
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option value='' selected="true">Seleccionar una marca</option>
<option value='audi'>Audi</option>
<option value='bmw'>BMW</option>
<option value='citroen'>Citroen</option>
<option value='fiat'>Fiat</option>
<option value='ford'>Ford</option>
<option value='honda'>Honda</option>
<option value='hyundai'>Hyundai</option>
<option value='kia'>Kia</option>
<option value='mazda'>Mazda</option>
</select>
</body>
</html>
Ahora, tengo estos 2 select:
<select class="form-control" id="locali" name="locali">
</select>
<select class="selectpicker" id="colonia" name="colonia" data-show-subtext="true" data-live-search="true">
</select>
Estos se llenan con información de una Base de datos, y el segundo select (el de colonias) se llena UNA VEZ que seleccionas una localidad en el primero.
Este es el script que uso para cargar los datos al select:
$("#locali").on('change', function(){
$("#locali option:selected").each (function(){
localidad =$(this).val();
});
var opcion = 2;
$.ajax({
url: "../ajax/colonias.php",
type: 'POST',
data: {opcion: opcion, localidad: localidad, municipio: municipio},
})
.done(function(res){
$("#colonia").html(res);
});
});
y este es el codigo donde hago la consulta a la base de datos para llenar el select:
case 2:
$municipio = $_POST['municipio'];
$localidad = $_POST['localidad'];
$query = $conexion -> query
("SELECT colonia FROM colonias WHERE municipio = '$municipio' AND localidad = '$localidad' ORDER by colonia ASC");
$tmp .= "<option value='NULO'>NULO</option>";
while ($valores = $query->fetch_assoc()) {
$tmp .= '<option value="'.$valores['colonia'].'">'.$valores['colonia'].'</option>';
}
$tmp .="<option value='otros'> Otros </option>";
break;
Y ya por ultimo hago un echo
con la variable tmp
para llevar el html al select:
echo $tmp;
EL problema es el siguiente: Mi select queda vacío. Si, me da la opción de buscar, pero si el select esta vacío eso no me sirve de nada.
Inspeccionando el elemento en la página, me di cuenta de algo: La información si aparece, pero parece que no está en el lugar correcto, este es el codgo fuente:
<div class="btn-group bootstrap-select open">
<button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown" role="button" data-id="colonia" title="Ninguno Seleccionado" aria-expanded="true">
<span class="filter-option pull-left">Ninguno Seleccionado</span>
<span class="bs-caret"><span class="caret"></span></span>
</button>
<div class="dropdown-menu open" role="combobox" style="max-height: 429.55px; overflow: hidden; min-height: 42px;">
<div class="bs-searchbox">
<input type="text" class="form-control" autocomplete="off" role="textbox" aria-label="Search">
</div>
<ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 375.55px; overflow-y: auto; min-height: 0px;">
</ul>
</div>
<!-- ***********************
Aquí empiezan las colonias
*****************************-->
<select class="selectpicker" id="colonia" name="colonia" data-show-subtext="true" data-live-search="true" tabindex="-98">
<option value="NULO">NULO</option>
<option value="colonia1">Colonia1</option>
<option value="otros"> Otros </option>
</select>
</div>
tal parece que el select queda fuera del div en donde debería quedar, y es por eso que me aparece como vacío.
Alguien tiene alguna idea de donde puede estar el problema? O alguien ha realizado algo similar a esto antes que me pueda instruir en como puedo conseguir lo que busco hacer?