Search code examples
jquerydrop-down-menuplaceholderbootstrap-selectjquery-selectbox

How to add Placeholder to textbox inside select dropdown


enter image description here

 <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>

How can I add placeholder to that input text in selectbox. That textbox is generated dynamically. I researched about this but unable to found any helpful content. Please help me for this.

for example : Refer this link https://silviomoreto.github.io/bootstrap-select/examples/#live-search


Solution

  • Try this from 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>