Twitter Bootstrap Question posted in

Add placeholder to bootstrap selectpicker-Twitter bootstrap

I have created a bootstrap selectpicker. But I want to show a place holder called Search here inside select picker input search. It seems my methods are not working.

I tried with this script. It doesn’t seem to affect

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

Anyone know any solutions, please?

The snippet:

$(".selectpicker").selectpicker({
    liveSearchPlaceholder: "Search here.."
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.js"></script>

<select class="selectpicker" data-show-subtext="false" data-live-search="true" style="-webkit-appearance: none;"  data-live-search-placeholder="Search" >
    <option value="" disabled selected class="disabled"></option>
    <option value="ExhibitionPreparation">Exhibition Preparation</option>
    <option value="Onlineserviceorderplatformandformssubmission">- Online service order platform and forms submission</option>
    <option value="StandconstructionMachineandExhibitsetupmatters">- Stand construction. Machine and Exhibit set up matters</option>
</select>
Tags:

2

Answers


  1. 0

    i found this example "bootstrap-select with placeholder" try so: https://codepen.io/yakyrefael/pen/XRmVRG

    <select class="selectpicker" multiple data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true">
              <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>

$('.selectpicker').selectpicker(
  {  
    liveSearchPlaceholder: 'Placeholder text'
  }
);
    Login or Signup to reply.
  2. 0

    Please, replace this code

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

    by this one:

    $(function() {
   $(".selectpicker").parent('.bootstrap-select').find('.filter-option-inner-inner').text('Search here..')
})

    You can change ".selectpicker" by the id of a select if you want to set to it a specific placeholder.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search