如何在选择下拉列表中的文本框中添加占位符

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>

如何在选择框中为该输入文本添加占位符。该文本框是动态生成的。我研究了这个，但无法找到任何有用的内容。请帮帮我。

例如：请参阅此链接https://silviomoreto.github.io/bootstrap-select/examples/#live-search

Answer 1

试试这个来自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 2

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

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

我做了CodePen live example here ..

Answer 3

你能不能将data-live-search-placeholder =“Example”属性添加到元素中？

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>