1

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>&nbsp;
<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?

1
  • select2 funciono perfecto hasta la version 4 de bootstrap, con la 5 es un caos, no acepta los estilos con la funcion ajax, ando buscando un select similar... si sabes de alguno nos cuentas.
    – wings77
    el 5 may. 2023 a las 14:48

1 respuesta 1

0

Esto no te sirve? lo use en algunos selectores para localidades geograficas, que tienen muchos valores: https://select2.org/

4
  • me costó mucho implementarlo, pero me sirvió, Muchas gracias! el 8 oct. 2021 a las 18:47
  • si, es medio complicado, mas que nada para hacer solo un buscador, pero bueno, funciona.
    – rendor9
    el 8 oct. 2021 a las 19:25
  • esto me aparecio ahora, una opcion mas para selector con busqueda: developer.snapappointments.com/bootstrap-select
    – rendor9
    el 12 oct. 2021 a las 19:00
  • No ha sido actualizado para bootstrap 5
    – wings77
    el 8 jul. 2023 a las 18:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.