placeholder text for chosen plugin for single select not working
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>
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>
use data-placeholder="YOUR TEXT"
in select
tag
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.