удалить фильтрацию по умолчанию из ввода html с атрибутом list [duplicate]

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

<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>. Для меня это лучшее решение в этом случае.

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

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

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 к элементу, по которому произошел щелчок, и самому событию.

Просто вставьте желаемое значение по умолчанию во входной тег. Никакого дополнительного кодирования 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>