placeholder text for chosen plugin for single select not working

Question

I have the chosen plugin for single select implemented in my code. I am trying to add the Placeholder text for the search boxes but I am not able to. I have tried the following things:

<select id="search_pi" name="search_pi" type="text" class="chosen-select"
        style="width:450px;" onchange="this.form.submit()" >

  <option value="">Search Project/Initiative...</option>
  <?php
    include "../includes/search_dropdown.php";
    foreach($proj_ini_Array as $qa){
      echo "<option value = \"$qa\">$qa</option>";
    }
  ?>

JS

<script>
  $(document).ready(function() {
    $('.chosen-select').chosen({
      placeholder_text_single: "Select an option",
      no_results_text: "Oops, nothing found!"
    });  
  });
</script>

In the select field, I also tried using data-placeholder="Select an option" but that does not help too. Can someone please let me know what am I missing?

Thanks in advance.

Answer 1

Okay. I found out the answer. We need to have the first option as blank for the placeholder text to be activated for Single select search box.

<select id="search_pi" name="search_pi" type="text" class="chosen-select" style="width:450px;" onchange="this.form.submit()" >

  <option> </option>
  <?php
    include "../includes/search_dropdown.php";
    foreach($proj_ini_Array as $qa){
      echo "<option value = \"$qa\">$qa</option>";
    }
  ?>

In the above case, placeholder text will default to "Select an option".

For a customized placeholder-text for a single search select box you can edit your js file as below and have the first option blank for the placeholder text to be displayed:

<script>
  $(document).ready(function() {
    $('.chosen-select').chosen({
      placeholder_text_single: "Select Project/Initiative...",
      no_results_text: "Oops, nothing found!"
    });  
  });
</script>

Answer 2

use data-placeholder="YOUR TEXT" in select tag

Answer 3

To make your first option simply a guidance text, but unable for users to select it, use this:

<option selected="selected" disabled>Search Project/Initiative...</option>

* Edit *

Ah sorry, didn't read your question clearly enough to begin with.

Apparently the first <option> needs to be an empty one. See this jsfiddle.