How to add Placeholder to textbox inside select dropdown

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>

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

Is this what you're searching for? http://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box — roemel, Apr 18 '17 at 11:56
No. I gone through that, But in My case there is editable textbox. @Roman — Mohammed, Apr 18 '17 at 11:58
Is your code the same as in the example of the link you posted? — roemel, Apr 18 '17 at 12:02
yes.Its in blade of laravel.The options is generating through loop.@Roman — Mohammed, Apr 18 '17 at 12:03
Do you have the code of the loop or how the select and options are generated? — roemel, Apr 18 '17 at 12:06

RemyaJ · Accepted Answer · 2017-04-18T12:24:03.210

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>

score 1 · Answer 2 · answered Apr 18 '17 at 13:07

1

Ok. I have a solution for you. Please add the following option to the Jquery function call :

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

I made a CodePen live example here..

answered Apr 18 '17 at 13:07

Yaky Refael

166
1
8

FWIW, this works as a data attribute on the ` – Ben Y Aug 17 '22 at 02:18

score 0 · Answer 3 · edited Apr 18 '17 at 17:47

0

Can you please add data-live-search-placeholder="Example" atribute, to the element ?

edited Apr 18 '17 at 17:47

Mohammed

319
1
3
15

answered Apr 18 '17 at 11:57

Yaky Refael

166
1
8

score 0 · Answer 4 · answered Jun 29 '18 at 05:49

0

For your whole project, you can use jquery code.

    $(document).ready(function(){

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

answered Jun 29 '18 at 05:49

Muhammad Adnan

396
3
10

score 0 · Answer 5 · answered Aug 30 '18 at 08:24

0

Just simply add this data-title attribute in select tag

data-title="Search Here"

eg.

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

answered Aug 30 '18 at 08:24

Vinod Selvin

369
2
10

How to add Placeholder to textbox inside select dropdown

5 Answers5