Jak ustawić przeglądarkę, aby wyświetlała wszystkie opcje datalisty, gdy ustawiona jest wartość domyślna?

Question

Mam formularza HTML z datalist i gdzie wartość jest ustawiona w PHP, jak

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

chcę użytkownika, aby zobaczyć opcje w datalist, a także aktualną wartość z PHP. Jednak akcja "autouzupełniania" powoduje, że wartości z listy, które nie pasują (lub rozpoczynają się), są ukrywane na liście z bieżącą wartością, powiedzmy: $val='apple'. Czy istnieje sposób, aby tego uniknąć lub czy to zachowanie zostało naprawione przez przeglądarkę?

Answer 1

<datalist> wykorzystuje funkcję autouzupełniania, więc jest to normalne zachowanie.

Na przykład, jeśli ustawisz wartość wejściową na "o", zobaczysz tylko pomarańczową w opcjach danych. Sprawdza słowo z pierwszej litery. Ale jeśli ustawisz wartość wejściową na "a", nie zobaczysz w ogóle żadnych opcji.

Więc jeśli masz już wartość wejściową, nic nie będzie pokazywane w opcjach danych z wyjątkiem tej wartości, jeśli istnieje. Nie zachowuje się jak wybierz.

obejście tego byłoby użyć jQuery tak na przykład:

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

pełny test tutaj: https://jsfiddle.net/yw5wh4da/

Albo można użyć <select>. Dla mnie jest to lepsze rozwiązanie w tym przypadku.

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

powyższych rozwiązań są świetne, ale jeśli użytkownik naturalnie tylko kliknięcie obok wartości zastępczego, w polu wejściowym, chcąc zachować i kontynuuj, zostanie całkowicie usunięty.

Więc na podstawie rozwiązań powyżej, ja następujące rozwiązanie dla mnie:

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

Dla mnie nie jesteś na wielu polach wejściowych na stronie i chcę, żeby tylko ten miał takie zachowanie, więc pracuję z identyfikatorem i mam go "osobisty". Jeśli chcesz zmienić go na bardziej ogólną funkcję, musisz powiązać putValueBackFromPlaceholder z elementem, na którym nastąpiło kliknięcie, i samym wydarzeniem.

Answer 4

Wystarczy wkleić żądaną wartość domyślną w tagu wejściowym. Nie wymaga dodatkowego kodowania 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>