jquery - 如何将占位符添加到选择下拉列表中的文本框

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 实例。

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

只需在选择标签中添加这个 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>