Come posso fare in modo che un browser visualizzi tutte le opzioni del datalist quando viene impostato un valore predefinito?

Question

Ho un form HTML con un DataList e dove il valore è impostato con PHP, come

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

voglio all'utente di vedere le opzioni nel DataList, così come il valore corrente dal PHP. Tuttavia, l'azione "completamento automatico" causa valori dall'elenco che non corrispondono (o iniziano con) il valore corrente da nascondere dall'elenco, ad esempio se $val='apple'. C'è un modo per evitarlo, o questo comportamento è stato risolto dal browser?

Answer 1

<datalist> utilizza la funzionalità di completamento automatico, quindi questo è un comportamento normale.

Ad esempio, se si imposta il valore di input su "o", verrà visualizzato solo arancione nelle opzioni del datalist. Controlla la parola dalla prima lettera. Ma se imposti il ​​valore di input su 'a' allora non vedrai affatto le opzioni.

Quindi, se si dispone già di un valore in input, non verrà visualizzato nulla nelle opzioni del datalist ad eccezione di tale valore, se esistente. Non si comporta come selezionare.

soluzione per questo sarebbe quella di utilizzare jQuery in questo modo, per esempio:

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

prova completa qui: https://jsfiddle.net/yw5wh4da/

Oppure si potrebbe usare <select>. Per me è la soluzione migliore in questo caso.

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

soluzioni sopra sono grandi, ma se l'utente clicca naturalmente giusto accanto al valore segnaposto, all'interno della casella di input, con l'intenzione di mantenere e proseguilo, sarà completamente cancellato.

Quindi, sulla base delle soluzioni di cui sopra, ho fatto la seguente soluzione per 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); 
}); 

Per me non sei molte caselle di input su la pagina, e voglio solo che questo abbia questo comportamento, quindi lavoro con id e lo faccio "personale". Se desideri modificarlo con la funzione più generica, devi associare putValueBackFromPlaceholder con l'elemento su cui si è verificato il clic e l'evento stesso.

Answer 4

Basta incollare il valore predefinito desiderato nel tag di ingresso. Non è necessaria alcuna codifica JavaScript aggiuntiva!

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