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

<!-- 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>