https://js.do/powenko/01-jquery-placeholoder

[php]
<!– edit your html here –>
<input list="browsers" name="browser" id="fname">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
// Edit your script here
tidName="fname";
$(‘input#’+tidName).on(‘click’, function() {
$(this).attr(‘placeholder’,$(this).val());
$(this).val(”);
});
$(‘input#’+tidName).on(‘mouseleave’, function() {
if ($(this).val() == ”) {
$(this).val($(this).attr(‘placeholder’));
}
});
</script>

[/php]