如何将占位符添加到 select 下拉列表中的文本框

Question

 <select   class="form-control selectpicker" id="specialty_id" data-live-search="true"  tabindex="-98" name="specialty_id" >

                                <option selected="" value="0" id="ee" <?php if(isset($_GET['sp_id']) && $_GET['sp_id'] == 0): ?>{{ 'selected="selected"' }} <?php endif; ?>>Choose a Sp</option>
                                  @foreach($searchdropdown['dsp'] as $dsptext)
                                    <option value="{{ $dsptext->spect }}" <?php if(isset($_GET['sp_id']) && $_GET['sp_id'] == $dsptext->spect): ?>{{ 'selected="selected"' }} <?php endif; ?>>{{ $spdata->sp }}</option>

                                  @endforeach

                              </select>

如何向选择框中的输入文本添加占位符。该文本框是动态生成的。我对此进行了研究，但找不到任何有用的内容。请帮助我。

例如：参考这个link https://silviomoreto.github.io/bootstrap-select/examples/#live-search

Answer 1

能否将 data-live-search-placeholder="Example" 属性添加到元素中？

Answer 2

从 https://github.com/silviomoreto/bootstrap-select/blob/master/test.html、

试试这个

<select class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true">
            <optgroup label="filter1">
              <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>

Answer 3

好的。我有一个解决方案给你。请将以下选项添加到 Jquery 函数调用中：

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

我做了一个CodePenlive example here..

Answer 4

对于您的整个项目，您可以使用 jquery 代码。

    $(document).ready(function(){

      //selectpicker search placeholder
      $('.bs-searchbox input').attr('placeholder', 
      'Search record..');
     });

Answer 5

只需在 select 标签中添加此 data-title 属性即可

data-title="Search Here"

例如

<select class="selectpicker" data-live-search="true" data-title="Search Here">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
</select>

如何将占位符添加到 select 下拉列表中的文本框

How to add Placeholder to textbox inside select dropdown

jquery

drop-down-menu

placeholder

bootstrap-select

jquery-selectbox