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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With