Dropdown with Search Box using Bootstrap Selectpicker not working

I’m trying to search for supplier from the database using the bootstrap-select picker on the dropdown. What I want is while typing in a letter, the dropdown shows the relevant name from the database. The problem is, when I click the search bar, it doesn’t show me the list of suppliers in the dropdown. what went wrong? I was able to see the list of suppliers in the dropdown before adding in the data-live-search and the select picker class.

      <script>
      $(document).ready(function(){
           $('.search select').selectpicker();
      })
      </script>

<?php
//display supplier list on form

$supplier="SELECT * FROM supplier";
$sup_run=mysqli_query($conn,$supplier);

if(mysqli_num_rows($sup_run)> 0)
{
    ?>
     <div class="form-group search" >
        <label> Supplier Name</label>
        <select class="selectpicker"  data-live-search="true">

            <option value=""> Choose a Supplier Company</option>  
            <?php
                foreach($sup_run as $row)
                {
                    ?>
                    <option value="<?php echo $row['sup_id'];?>"><?php echo $row['sup_name'];?></option>
                    <?php
                }
                    ?>
                </select>     
                  </div>
  <?php
}
else{

    echo "No Data Available";
}                                    
    ?>

Answer

Since you haven’t provided any of your other code, I would assume you are properly including all required files – jquery, boostrap js and css. I would also assume your php code works and generates the required html. That being said, please examine the below snippet. I reproduced your error and examined the source code – it had all items in the DOM but was not showing any of them. According to the documentation the size parameter determines how may items are shown:

When set to false, the menu will always show all items.

Setting size: false seems to have resolved the issue.

$(document).ready(function(){
           $('.search select').selectpicker({
  size: false
           });
      })

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css');

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>


<div class="form-group search" >
        <label> Supplier Name</label>
        <select class="selectpicker" data-live-search="true">

            <option value=""> Choose a Supplier Company</option>  
            
<option value="1">Supplier Name</option>
<option value="2">Feil, Hills and Wunsch</option>
<option value="3">Sanford - Gutmann</option>
<option value="4">Quigley and Sons</option>
<option value="5">Kuhic - Streich</option>
<option value="6">Heaney Group</option>
<option value="7">Legros, O'Connell and Robel</option>
<option value="8">Kreiger Group</option>
<option value="9">Jakubowski, Pouros and Dooley</option>
<option value="10">Block - Legros</option>
<option value="11">Ernser - Bode</option>
<option value="12">Tillman - Champlin</option>
<option value="13">Nader - Rice</option>
<option value="14">Brekke Inc</option>
<option value="15">Buckridge - Rohan</option>
<option value="16">Wiza, Walsh and Zemlak</option>
<option value="17">Bogan and Sons</option>
<option value="18">Harvey - Reichert</option>
<option value="19">Hintz - Kunze</option>
<option value="20">Rodriguez - Mayer</option>
<option value="21">Beahan - Daugherty</option>
                </select>     
                  </div>

Advertisement

Answer