将占位符添加到引导选择选择器答案

【问题标题】：Add placeholder to bootstrap selectpicker将占位符添加到引导选择选择器
【发布时间】：2021-01-18 16:22:39
【问题描述】：

我创建了一个引导选择器。但我想在选择选择器输入搜索中显示一个名为 Search here 的占位符。看来我的方法不起作用。

我试过这个脚本。好像没有影响

$(".selectpicker").selectpicker({
  liveSearchPlaceholder: "Placeholder text"
});

请问有人知道解决办法吗？

sn-p：

$(".selectpicker").selectpicker({
    liveSearchPlaceholder: "Search here.."
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.js"></script>

<select class="selectpicker" data-show-subtext="false" data-live-search="true" style="-webkit-appearance: none;"  data-live-search-placeholder="Search" >
    <option value="" disabled selected class="disabled"></option>
    <option value="ExhibitionPreparation">Exhibition Preparation</option>
    <option value="Onlineserviceorderplatformandformssubmission">- Online service order platform and forms submission</option>
    <option value="StandconstructionMachineandExhibitsetupmatters">- Stand construction. Machine and Exhibit set up matters</option>
</select>

【问题讨论】：

您能更好地描述您的问题吗？
搜索输入中的占位符未显示。但多亏了你，我更新到了最新的 bootstrap-select。

标签： jquery css bootstrap-4

【解决方案1】：

我发现了这个示例“带占位符的引导选择”尝试：https://codepen.io/yakyrefael/pen/XRmVRG

<select class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
            <optgroup label="filter2">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
            <optgroup label="filter3">
              <option>option1</option>
              <option>option2</option>
              <option>option3</option>
              <option>option4</option>
            </optgroup>
</select>

$('.selectpicker').selectpicker(
  {  
    liveSearchPlaceholder: 'Placeholder text'
  }
);

【讨论】：

【解决方案2】：

请替换此代码

$(".selectpicker").selectpicker({
   liveSearchPlaceholder: "Placeholder text"
});

这个：

$(function() {
   $(".selectpicker").parent('.bootstrap-select').find('.filter-option-inner-inner').text('Search here..')
})

如果你想为它设置一个特定的占位符，你可以通过一个选择的 id 来改变“.selectpicker”。

【讨论】：