how to add placeholder in selectpicker search input

Question

How I can put placeholder in my selectpicker search input, kindly suggest some idea..

<div class="form-group">
  <label class="control-label " for="select"><span class="clrRed">*</span>abc</label>
  <select class="select form-control selectpicker empty" id="existingJob" name="existing-job" data-live-search="true" required>
    <option value="" selected="true" disabled="true" class="placeholder">ht ht ht </option>
    <option value="Job01">Job 01 </option>
    <option value="Job02">Job 02</option>
    <option value="Job03">Job 03</option>
    <option value="Job04">Job 04</option>
  </select>
</div>

try changing `selected="true"` to `selected="selected"` or just `selected` — Sangsom, Jul 27 '18 at 09:57
Possible duplicate of [How do I make a placeholder for a 'select' box?](https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box) — JamesS, Jul 27 '18 at 11:00

score 2 · Answer 1 · answered Apr 05 '19 at 06:40

data-live-search-placeholder="Search"

<select class="selectpicker" data-live-search="true" data-live-search-placeholder="Search">
  <option value="Job01">Job 01 </option>
  <option value="Job02">Job 02</option>
  <option value="Job03">Job 03</option>
  <option value="Job04">Job 04</option>
</select>

score 0 · Answer 2 · answered Jul 27 '18 at 09:59

0

<select>
    <option value="" selected disabled>Please select</option>
    <option value="Job01">Job 01 </option>
    <option value="Job02">Job 02</option>
    <option value="Job03">Job 03</option>
    <option value="Job04">Job 04</option>
</select>

answered Jul 27 '18 at 09:59

Dennis

1,281
13
30

score 0 · Answer 3 · answered Jul 27 '18 at 10:03

0

https://picker.adam-uhlir.me/

or tell me which jquery plugin you are using?

answered Jul 27 '18 at 10:03

Kaleem Nalband

687
7
21

I using Jquery 3.3.1 - https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js – user2147423 Jul 27 '18 at 11:14

score 0 · Answer 4 · answered Feb 25 '23 at 06:29

You can put a placeholder text in search usingdata-live-search-placeholder and change select placeholder text using 'title' attribute.

<label for="job">Jobs</label>

<select id="job" class="selectpicker" multiple title="Select Jobs" data-live-search="true" data-live-search-placeholder="Search">
    <option>job 01</option>
    <option>job 02</option>
    <option>job 03</option>
</select>

how to add placeholder in selectpicker search input

4 Answers4