How can I make a browser display all datalist options when a default value is set?

Question

I have an HTML form with a datalist and where the value is set with PHP, like

<input list="values" value="<?php echo $val; ?>">
 <datalist id="values">
  <option value="orange">
  <option value="banana">
 </datalist>

I want the user to see the options in the datalist, as well as the current value from the PHP. However, the "autocomplete" action causes values from the list that don't match (or start with) the current value to be hidden from the list, say if $val='apple'. Is there any way to avoid that, or is this behaviour fixed by the browser?

Answer 1

<datalist> uses autocomplete functionality so this is normal behaviour.

For example if you set input value to be 'o' you will see just orange in datalist options. It checks word from first letter. But if you set input value to 'a' then you won't see options at all.

So if you already have value in input then nothing will be shown in datalist options except that value if it exists. It doesn't behave like select.

Workaround for this would be to use jquery like this for example:

$('input').on('click', function() {
  $(this).val('');
});
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val('apple');
  }
});

Full test here: https://jsfiddle.net/yw5wh4da/

Or you could use <select>. To me it is better solution in this case.

Answer 2

HTML:

<input list="values" placeholder="select">
<datalist id="values">
  <option value="orange">
  <option value="banana">
  <option value="lemon">
  <option value="apple">
</datalist>

JS:

$('input').on('click', function() {
    $(this).attr('placeholder',$(this).val());
  $(this).val('');
});
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val($(this).attr('placeholder'));
  }
});

Answer 3

The solutions above are great, but if the user naturally just clicks next to the placeholder value, inside the input box, intending to keep and continue it, it will become completely erased.

So based on the solutions above, I did the following solution for me:

HTML:

<input id="other" list="values" value="<?php echo $val; ?>">
 <datalist id="values">
  <option value="orange">
  <option value="banana">
 </datalist>

JS:

jQuery(document).ready(function ($) {
    function putValueBackFromPlaceholder() {
        var $this = $('#other');
        if ($this.val() === '') {
            $this.val($this.attr('placeholder'));
            $this.attr('placeholder','');
        }
    }

    $('#other')
        .on('click', function(e) {
            var $this = $(this);
            var inpLeft = $this.offset().left;
            var inpWidth = $this.width();
            var clickedLeft = e.clientX;
            var clickedInInpLeft = clickedLeft - inpLeft;
            var arrowBtnWidth = 12;
            if ((inpWidth - clickedInInpLeft) < arrowBtnWidth ) {
                $this.attr('placeholder',$this.val());
                $this.val('');
            }
            else {
                putValueBackFromPlaceholder();
            }
        })
        .on('mouseleave', putValueBackFromPlaceholder);
});

For me there're many input boxes on the page, and I want only this one to have this behavior, so I work with id and have it "personal." If you wish to change it to the more generic function, you'll have to bind putValueBackFromPlaceholder with the element, on which the click happened, and the event itself.

Answer 4

Another option, based on the proposed solution, that preserves the previous value or the new one chosen.

// Global variable to store current value
var oldValue = '';
// Blank value when click to activate all options
$('input').on('click', function() {
  oldValue = $(this).val();
  $(this).val('');
});
// Restore current value after click
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val(oldValue);
  }
});

https://jsfiddle.net/jpussacq/7Ldbc013/

Answer 5

Just paste the desired default value in input tag. No extra JavaScript coding needed!

        <input list="skills" value="DBA">

          <datalist name="skills" id="skills">

              <option value="PHP">Zend PHP</option>
              <option value="DBA">ORACLE DBA</option>
              <option value="APEX">APEX 5.1</option>
              <option value="ANGULAR">ANGULAR JS</option>

          </datalist>