web-dev-qa-db-fra.com

Comment faire en sorte qu'un navigateur affiche toutes les options de datalist lorsqu'une valeur par défaut est définie?

J'ai un formulaire HTML avec un datalist et où la valeur est définie avec PHP, comme

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

Je veux que l'utilisateur voie les options dans le datalist, ainsi que la valeur actuelle de PHP. Cependant, l'action "autocomplete" fait que les valeurs de la liste qui ne correspondent pas (ou ne commencent pas par) à la valeur actuelle ne sont pas masquées dans la liste, par exemple si $val='Apple'. Existe-t-il un moyen d'éviter cela ou ce comportement est-il corrigé par le navigateur?

htmlhtml5browserdatalist
16
Dave W

<datalist> utilise la fonctionnalité de saisie semi-automatique, ce qui est normal.

Par exemple, si vous définissez la valeur d'entrée sur "o", vous verrez uniquement orange dans les options de datalist. Il vérifie le mot de la première lettre. Mais si vous définissez la valeur d'entrée sur 'a', vous ne verrez aucune option.

Donc, si vous avez déjà une valeur en entrée, rien ne sera affiché dans les options de datalist sauf cette valeur si elle existe. Il ne se comporte pas comme select.

La solution pour cela serait d'utiliser jquery comme ceci par exemple:

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

Test complet ici: https://jsfiddle.net/yw5wh4da/

Ou vous pouvez utiliser <select>. Pour moi, c'est la meilleure solution dans ce cas.

5
jakob

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

Les solutions ci-dessus sont excellentes, mais si l'utilisateur clique naturellement juste à côté de la valeur de l'espace réservé, dans la zone de saisie, dans l'intention de la conserver et de la continuer, elle sera complètement effacée.

Donc, basé sur les solutions ci-dessus, j'ai fait la solution suivante pour moi:

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

Pour moi, il y a beaucoup de zones de saisie sur la page, et je veux seulement que celui-ci ait ce comportement, alors je travaille avec id et je l'ai "personnel" Si vous souhaitez passer à la fonction plus générique, vous devez lier putValueBackFromPlaceholder à l'élément sur lequel le clic s'est produit et à l'événement lui-même.

1
Olga Farber

Une autre option, basée sur la solution proposée, qui préserve la valeur précédente ou la nouvelle choisie.

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

0
jpussacq

Il suffit de coller la valeur par défaut souhaitée dans la balise d’entrée. Pas de code JavaScript supplémentaire nécessaire!

        <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>
0
Sharfuddin Zishan