0

Tenho o seguinte select:

  <label>Para</label>
      <div class="input_field">
        <select class="form-control" name="Para[]" id="Para" multiple>
        <option></option>
  <?php        
     $sql = "SELECT A.Discricao FROM(SELECT Discricao FROM raddb.Grupo
            UNION ALL
            SELECT nome FROM raddb.usuarios) AS A ORDER BY A.Discricao ASC";
     $qr = mysqli_query($conn, $sql);
     while($ln = mysqli_fetch_assoc($qr)){
     echo '<option value="'.$ln['Discricao'].'">'.$ln['Discricao'].'</option>';
     }
  ?>        
</select>

E pretendo colocar esta este filtro de pesquisa dentro do select como na imagem:

inserir a descrição da imagem aqui

Adicionei as seguintes bibliotecas:

<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

Adicionei à classe do select chosen-select

Depois no js coloquei:

$(document).bind("pageinit", function() {
$(".chosen-select").chosen();
});

Mas a caixa de texto para escrever e pesquisar não aparece, como mostro na imagem: inserir a descrição da imagem aqui

2 Respostas 2

1

Para usar esta biblioteca, você tem que acrescentar todas as dependências na página: a lib do chosen (js e css) e jquery.

No teu elemento select, colocar a classe da lib que está sendo chamada: chosen-select.

Veja como seria na HTML:

<label for="id_para">Para</label>
      <div class="input_field">
        <select tabindex="1" data-placeholder="Selecione a descrição..." class="form-control chosen-select" name="Para[]" id="id_para" multiple>
  <?php        
     $sql = "SELECT A.Discricao FROM(SELECT Discricao FROM raddb.Grupo
            UNION ALL
            SELECT nome FROM raddb.usuarios) AS A ORDER BY A.Discricao ASC";
     $qr = mysqli_query($conn, $sql);
     while($ln = mysqli_fetch_assoc($qr)){
     echo '<option value="'.$ln['Discricao'].'">'.$ln['Discricao'].'</option>';
     }
  ?>        
</select>
 </div>

Acrescente o código da lib:

<script>
$(function() {
    $(".chosen-select").chosen({no_results_text: "Oops, nada foi selecionado!"}); 
});
</script>

Veja como será a saída na HTML através desse Fiddle.

3
  • a libs são estas <link rel="stylesheet" href="/wordpress/wp-content/themes/sparkling/assets/css/chosen.css">, <script src="/wordpress/wp-content/themes/sparkling/assets/js/chosen.jquery.js"></script>, <script src="/wordpress/wp-content/themes/sparkling/assets/js/chosen.jquery.min.js"></script>, <script src="/wordpress/wp-content/themes/sparkling/assets/js/chosen.proto.js"></script>, <script src="/wordpress/wp-content/themes/sparkling/assets/js/chosen.proto.min.js"></script>, <link rel="stylesheet" href="/wordpress/wp-content/themes/sparkling/assets/css/chosen.min.css">
    – Bruno
    Commented 11/09/2019 às 17:00
  • faz a pesquisa mas não cria o input como no seu exemplo.
    – Bruno
    Commented 11/09/2019 às 17:09
  • Você leu toda a resposta? class="form-control chosen-select" Commented 2/10/2019 às 11:31
0

Bom, pelo o que eu vi você pode usar uma solução chamada select2.

inclua o seguinte stylesheet no HEAD do seu html:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />

No caso do seu html coloque o seguinte:

  <label for="id_para">Para</label>
      <div class="input_field">
        <select class="form-control" name="Para[]" id="id_para" multiple>
        <option></option>
  <?php        
     $sql = "SELECT A.Discricao FROM(SELECT Discricao FROM raddb.Grupo
            UNION ALL
            SELECT nome FROM raddb.usuarios) AS A ORDER BY A.Discricao ASC";
     $qr = mysqli_query($conn, $sql);
     while($ln = mysqli_fetch_assoc($qr)){
     echo '<option value="'.$ln['Discricao'].'">'.$ln['Discricao'].'</option>';
     }
  ?>        
</select>

Note que o id do select é "id_para". Agora basta adicionar um script JS chamando a função do select2 para o id fornecido:

$(document).ready(function() {
    // Select2
    $('#id_para').select2()
  });

Agora ao clicar na barra, vai aparecer a opção de filtrar ao digitar, junto com as opções disponíveis.

3
  • continua sem aparecer o input para escrever e pesquisar
    – Bruno
    Commented 11/09/2019 às 15:55
  • Tente aplicar o select2 sobre a classe do select então, ficando assim: $('.form-control').select2(); Commented 11/09/2019 às 16:01
  • não está a dar, penso que é por ter o multiple
    – Bruno
    Commented 11/09/2019 às 16:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .