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

Posted 2023-05-08

【中文标题】使用 Bootstrap Selectpicker 的搜索框下拉菜单不起作用

【英文标题】：Dropdown with Search Box using Bootstrap Selectpicker not working

【发布时间】：2021-08-21 09:41:30

【问题描述】：

我正在尝试使用下拉菜单中的引导选择选择器从数据库中搜索供应商。我想要的是在输入字母时，下拉列表显示数据库中的相关名称。问题是，当我单击搜索栏时，它不会在下拉列表中显示供应商列表。什么地方出了错？在添加数据实时搜索和选择选择器类之前，我能够在下拉列表中看到供应商列表。

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

【参考方案1】：

由于您没有提供任何其他代码，我假设您正确包含所有必需的文件 - jquery、boostrap js 和 css。我还假设您的 php 代码可以工作并生成所需的 html。话虽如此，请检查下面的sn-p。我重现了您的错误并检查了源代码 - 它包含 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>