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.

Answer 4

There's actually a better/easier solution to this problem if you are constructing via HTML rather than JS. You have to do two things.

1. The first <option> in your <select> should be empty.
2. You should include placeholder="Placeholder goes here" in your <select>. Apparently this was once called data-placeholder, which I think has led to some confusion.

So, in total:

<select placeholder="Placeholder goes here">
    <option><!-- Empty option goes here. --><option>
    <option>Other Option</option>
</select>

Answer 5

User response @Zack Joerdan solved my problem. So the spring required value inside option

<select placeholder="Placeholder goes here">
    <option value=""><!-- Empty option goes here. --><option>
    <option>Other Option</option>
</select>

Answer 6

You can just simply add data-placeholder="YOUR TEXT" No need to use jquery for the same

Here is the example

<select id="search_pi"  data-placeholder="Select Project/Initiative..." name="search_pi" type="text" class="chosen-select" style="width:450px;" onchange="this.form.submit()" >
              <?php
                include "../includes/search_dropdown.php";
                foreach($proj_ini_Array as $qa){
                  echo "<option value = \"$qa\">$qa</option>";
                }
              ?>
</select>