Wie kann ich in einem Browser alle Datenlistenoptionen anzeigen, wenn ein Standardwert festgelegt ist?

Question

Ich habe ein HTML-Formular mit einem Datalist und wo der Wert mit PHP gesetzt ist, wie

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

ich den Benutzer mag die Optionen in der Datenliste, um zu sehen, sowie den aktuellen Wert aus dem PHP. Die Aktion "Autocomplete" bewirkt jedoch, dass Werte aus der Liste, die nicht mit dem aktuellen Wert übereinstimmen (oder damit beginnen), aus der Liste ausgeblendet werden, z. B. $val='apple'. Gibt es eine Möglichkeit, dies zu vermeiden, oder wird dieses Verhalten vom Browser behoben?

Answer 1

<datalist> verwendet Autocomplete-Funktionalität, so ist dies normales Verhalten.

Zum Beispiel, wenn Sie den Eingangswert auf 'o' setzen, sehen Sie nur orange in Datenoptionen. Es überprüft das Wort vom ersten Buchstaben. Aber wenn Sie den Eingabewert auf 'a' setzen, werden Sie überhaupt keine Optionen sehen.

Wenn Sie also bereits einen Wert in der Eingabe haben, wird nichts in den Datenlistenoptionen angezeigt, außer diesem Wert, wenn er existiert. Es verhält sich nicht wie Auswählen.

Abhilfe hierfür wäre jquery zum Beispiel wie folgt zu verwenden:

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

Voll Test hier: https://jsfiddle.net/yw5wh4da/

Oder Sie <select> nutzen könnten. Für mich ist es in diesem Fall die bessere Lösung.

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

Die oben genannten Lösungen sind groß, aber wenn der Benutzer natürlich klickt direkt neben dem Platzhalter-Wert innerhalb des Eingabefeldes, in der Absicht zu halten und Weitermachen, es wird komplett gelöscht.

auf den oben genannten Lösungen So basiert, die ich für mich die folgende Lösung hat:

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

Für mich sind da auf viele Eingabefelder die Seite, und ich möchte nur, dass diese dieses Verhalten hat, also arbeite ich mit ID und habe sie "persönlich". Wenn Sie es in die allgemeinere Funktion ändern möchten, müssen Sie putValueBackFromPlaceholder mit dem Element, auf dem der Klick stattfand, und dem Ereignis selbst binden.

Answer 4

Fügen Sie einfach den gewünschten Standardwert in das Eingabe-Tag ein. Keine zusätzliche JavaScript-Codierung erforderlich!

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