html - español - ¿Cómo puedo hacer que un navegador muestre todas las opciones de la lista de datos cuando se establece un valor predeterminado?

title html español

Question

Tengo un formulario HTML con un datalist y donde el valor se establece con PHP, como

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

Quiero que el usuario vea las opciones en el datalist, así como el valor actual de PHP. Sin embargo, la acción "autocompletar" hace que los valores de la lista que no coincidan (o comiencen con) el valor actual se oculten de la lista, digamos si $val=''apple'' . ¿Hay alguna manera de evitar eso, o este comportamiento es corregido por el navegador?

Answer 1

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 2

Las soluciones anteriores son excelentes, pero si el usuario simplemente hace clic junto al valor del marcador de posición, dentro del cuadro de entrada, con la intención de mantenerlo y continuar, se borrará por completo.

Entonces, basándome en las soluciones anteriores, hice la siguiente solución para mí:

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

Para mí hay muchos cuadros de entrada en la página, y solo quiero que este tenga este comportamiento, así que trabajo con ID y lo tengo como "personal". Si desea cambiarlo a la función más genérica, deberá vincular putValueBackFromPlaceholder con el elemento en el que se produjo el clic y el evento en sí.

Answer 3

Otra opción, basada en la solución propuesta, que conserva el valor anterior o el nuevo elegido.

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

Simplemente pegue el valor predeterminado deseado en la etiqueta de entrada. ¡No se necesita codificación extra de 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>

Answer 5

<datalist> usa la funcionalidad de autocompletar, por lo que este es un comportamiento normal.

Por ejemplo, si configura el valor de entrada como ''o'' verá solo naranja en las opciones de la lista de datos. Comprueba la palabra desde la primera letra. Pero si establece el valor de entrada en ''a'', entonces no verá ninguna opción.

Entonces, si ya tiene un valor en la entrada, entonces no se mostrará nada en las opciones de la lista de datos, excepto ese valor, si existe. No se comporta como seleccionar.

La solución para esto sería usar jquery como este, por ejemplo:

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

Prueba completa aquí: https://jsfiddle.net/yw5wh4da/

O podrías usar <select> . Para mí es mejor solución en este caso.