I use select2 with bootstrap3.

.html

Single select boxes

How to add search icon in search field？

like this:

/

This is my Select2 option code:

$(".select2").select2({
    theme: 'bootstrap'
});

This is my HTML code:

<select style="width:100%" class="select2">
    <optgroup label="Test-group">
        <option>test1</option>
        <option>test2</option>
    </optgroup>
</select>

Thank you.

I use select2 with bootstrap3.

https://select2.github.io/examples.html

Single select boxes

How to add search icon in search field？

like this:

https://fk.github.io/select2-bootstrap-css/

This is my Select2 option code:

$(".select2").select2({
    theme: 'bootstrap'
});

This is my HTML code:

<select style="width:100%" class="select2">
    <optgroup label="Test-group">
        <option>test1</option>
        <option>test2</option>
    </optgroup>
</select>

Thank you.

• javascript
• jquery
• twitter-bootstrap
• jquery-select2

Share Improve this question Follow edited Sep 5, 2016 at 15:50 Michael Benjamin 373k110110 gold badges613613 silver badges730730 bronze badges asked Sep 5, 2016 at 2:55 manaovomanaovo 3111 silver badge33 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

inspect your html and find the css rule of input, then add background to it like: background: #fff url('select2.png') no-repeat 100% -22px;

This thread helped me - 8 years later there are slightly more options on how to do this, the one described below is what I ended up doing. This adds the placeholder value to the search bar inside of a select2 dropdown using jquery, using with bootstrap5.

$('#your-select-id').one('select2:open', function(e) {
    $('input.select2-search__field').prop('placeholder', 'enter username or city');
});

ref: https://forums.select2/t/additional-placeholder-in-search-input/325