Javascript 使用引导选择器的搜索框下拉菜单不工作

我试图使用下拉列表中的引导选择选择器从数据库中搜索供应商。我想要的是，在键入一封信时，下拉列表显示数据库中的相关名称。问题是，当我单击搜索栏时，它不会在下拉列表中显示供应商列表。出了什么问题？在添加data live search和select picker类之前，我可以在下拉列表中看到供应商列表

      <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";
}                                    
    ?>

$（文档）.ready（函数（）{
$（'.search-select'）.selectpicker（）；
})
供应商名称
选择供应商公司

由于您没有提供任何其他代码，我假设您正确地包含了所有必需的文件—jquery、boostrap

js

和

css

。我还假设您的php代码可以工作并生成所需的html。尽管如此，请检查下面的代码片段。我复制了您的错误并检查了源代码——它包含DOM中的所有项，但没有显示任何项。根据文档，尺寸参数决定了项目的显示方式：

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

设置大小：false似乎解决了这个问题

$（文档）.ready（函数（）{
$（'.search-select'）。选择器({
大小：假
});
})

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

供应商名称
选择供应商公司
供应商名称
费勒、希尔和文施
桑福德-古特曼
奎格利父子
库希克-斯特里希
希尼集团
勒格罗斯、奥康奈尔和罗贝尔
克里格集团
雅库博夫斯基、普罗斯和杜利
Block-Legros
恩泽-博德
蒂尔曼-尚普林
良信米
布雷克公司
巴克里奇-罗汉
Wiza、Walsh和Zemlak
博根父子
哈维-赖彻
欣茨-昆泽
罗德里格斯-迈耶
比汉-多尔蒂