使用 Bootstrap Selectpicker 的搜索框下拉列表不起作用

Question

我正在尝试使用下拉菜单中的 bootstrap-select 选择器从数据库中搜索供应商。我想要的是在输入字母时，下拉列表显示数据库中的相关名称。问题是，当我点击搜索栏时，它没有在下拉列表中显示供应商列表。什么地方出了错？在添加数据实时搜索和 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>

使用 Bootstrap Selectpicker 的搜索框下拉列表不起作用

Dropdown with Search Box using Bootstrap Selectpicker not working

html

javascript

php

bootstrap-select

bootstrap-selectpicker