Как заставить браузер отображать все параметры каталогизации, когда установлено значение по умолчанию?

У меня есть HTML-форма с datalist и где значение задано с помощью PHP, например

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

Я хочу, чтобы пользователь видел параметры в datalist, а также текущее значение из PHP. Однако действие "автозаполнение" вызывает значения из списка, которые не соответствуют (или начинают с) текущее значение, которое должно быть скрыто из списка, скажем, если $val='apple'. Есть ли способ избежать этого, или это поведение исправлено браузером?

Ответы

Ответ 1

<datalist> использует функцию автозаполнения, поэтому это нормальное поведение.

Например, если вы устанавливаете значение ввода "o", вы увидите только оранжевые параметры в диалоговом окне. Он проверяет слово из первой буквы. Но если вы установите значение ввода на "a", вы не увидите никаких параметров.

Итак, если у вас уже есть значение во вводе, то ничего не будет показано в параметрах datalist, кроме этого значения, если оно существует. Он не ведет себя как select.

Обходным путем для этого будет использование jquery, например, например:

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

Полный тест здесь: https://jsfiddle.net/yw5wh4da/

Или вы можете использовать <select>. Для меня это лучшее решение в этом случае.

Ответ 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'));
  }
});

Ответ 3

Вышеприведенные решения великолепны, но если пользователь, естественно, просто нажимает рядом со значением placeholder, внутри поля ввода, намереваясь сохранить и продолжить его, он будет полностью удален.

Итак, основываясь на решениях выше, я сделал для меня следующее решение:

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);
});

Для меня есть много полей ввода на странице, и я хочу, чтобы у этого только было такое поведение, поэтому я работаю с id и имею его "личным". Если вы хотите изменить его на более общую функцию, вам придется привязать putValueBackFromPlaceholder к элементу, по которому произошел щелчок, и самому событию.

Ответ 4

Просто вставьте желаемое значение по умолчанию во входной тег. Никакого дополнительного кодирования JavaScript не требуется!

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