Set select search text in html

Question

I got the following 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>

And I intend to put this search filter inside the select as in the image:

I added the following libraries:

<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>

I added it to the select class chosen-select

Then in the js placed:

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

But the text box to write and search does not appear, as shown in the image:

Answer 1

To use this library, you have to add all the dependencies on the page: the Chosen lib (js and css) and jquery.

In your select element, put the lib class being called: chosen-select.

See how it would look in 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>

Add the lib code:

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

See how the output in HTML will be through this Fiddle.

Answer 2

Well, from what I’ve seen you can use a solution called Select2.

include the following stylesheet in your html’s HEAD:

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

In the case of your html put the following:

  <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 that the select id is "id_para". Now simply add a JS script by calling the Select2 function for the given id:

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

Now by clicking on the bar, the option to filter while typing will appear, along with the available options.