web-dev-qa-db-fra.com

Comment afficher le texte dans datalist html5 et non valeur

<!DOCTYPE html>
<html>
<body>

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">1</option>
  <option value="Firefox">2</option>
  <option value="Chrome">3</option>
  <option value="Opera">4</option>
  <option value="Safari">5</option>
</datalist>
<input type="submit">
</form>

</body>
</html>

http://jsfiddle.net/j7ehtqjd/1/

J'ai attaché un violon. S'il vous plaît vérifier . La solution que je veux réaliser est quand je clique sur la liste déroulante la valeur est affichée, mais je veux le texte 1,2,3,4,5 à afficher. Je dois utiliser une réponse JSON pour mon problème actuel. Seul le texte doit être affiché et la valeur doit être masquée comme une liste déroulante générale. Cette fonctionnalité d'auto-complétion est nécessaire sinon j'aurais opté pour la liste déroulante normale.

jqueryhtml5drop-down-menuhtml-datalist
19
Cerebus1504

Modifier, mis à jour

Régent suivant

Essayez (v3)

html

<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="InternetExplorer" value="1"></option>
    <option data-value="Firefox" value="2"></option>
    <option data-value="Chrome" value="3"></option>
    <option data-value="Opera" value="4"></option>
    <option data-value="Safari" value="5"></option>
</datalist>
<input id="submit" type="submit">

js

$(document).ready(function() {

var data = {}; 
$("#browsers option").each(function(i,el) {  
   data[$(el).data("value")] = $(el).val();
});
// `data` : object of `data-value` : `value`
console.log(data, $("#browsers option").val());


    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});

jsfiddle http://jsfiddle.net/guest271314/j7ehtqjd/13/

20
guest271314

Une méthode assez compliquée pour faire cela sans dépendances comme jQuery ( edit: je réalise que jQuery est utilisé par l'OP, mais cette méthode s'intégrera parfaitement avec ou sans jQuery, donc pourrait aider d'autres qui ne sont pas ).

Commencez par échanger vos nœuds de valeur et de texte, comme suit:

<input list="browsers" name="browser" id="my_input">
  <datalist id="browsers">
    <option value="Internet Explorer">1</option>
    <option value="Firefox">2</option>
    <option value="Chrome">3</option>
    <option value="Opera">4</option>
    <option value="Safari">5</option>
  </datalist>
  <input type="submit">

Cela garantit que l'entrée indique toujours la valeur correcte pour l'utilisateur. Ajoutez ensuite du code JavaScript pour vérifier le nœud de texte de la valeur correspondante, comme suit:

let $input = document.getElementById('my_input');
let $datalist = document.getElementById('browsers');

$input.addEventListener('change', () => {
  let _value = null;

  let input_value = $input.value;
  let options = $datalist.children;
  let i = options.length;

  while(i--) {
    let option = options[i];

    if(option.value == input_value) {
      _value = option.textContent;
      break;
    }
  }

  if(_value == null) {
    console.warn('Value does not exist');
    return false;
  }

  console.log('The value is:', _value );
});

Vous pouvez également modifier l'écouteur d'événements 'change' en 'keyup' également pour obtenir des commentaires en temps réel. Et au lieu de console.log('The value is:', _value ), vous pouvez simplement ajouter une entrée hidden supplémentaire pour stocker la valeur, vous permettant ainsi d’envoyer à la fois la valeur et l’id.

Ceci utilise la notation JavaScript moderne, mais pour le rendre compatible avec les versions antérieures, il suffit de changer l'appel 'change', () => { en 'change', function() { et de changer let en var.

1
Oliver