使用 Bootstrap Selectpicker 的搜索框下拉菜單不起作用

Question

我正在嘗試使用下拉列表中的引導選擇選擇器從數據庫中搜索供應商。 我想要的是在輸入字母時，下拉列表顯示數據庫中的相關名稱。 問題是，當我單擊搜索欄時，它不會在下拉列表中顯示供應商列表。 什么地方出了錯？ 在添加數據實時搜索和 select 選擇器 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 1

由於您沒有提供任何其他代碼，我假設您正確包含所有必需的文件 - jquery、boostrap js和css 。 我還假設您的 php 代碼有效並生成所需的 html。 話雖如此，請檢查以下代碼段。 我重現了您的錯誤並檢查了源代碼 - 它包含 DOM 中的所有項目，但沒有顯示任何項目。 根據文檔， size參數決定了項目的顯示方式：

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

設置 size: false 似乎已經解決了這個問題。

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