javascript angular - Afficher les étiquettes de datalist mais soumettre la valeur réelle




input onchange (5)

Actuellement, l'élément HTML5 <datalist> est pris en charge dans la plupart des principaux navigateurs (sauf Safari) et semble être un moyen intéressant d'ajouter des suggestions à une entrée.

Cependant, il semble y avoir quelques différences entre l'implémentation de l'attribut value et le texte interne sur <option> . Par exemple:

<input list="answers" name="answer">
<datalist id="answers">
  <option value="42">The answer</option>
</datalist>

Ceci est géré différemment par différents navigateurs:

Chrome et Opera:

FireFox et IE 11:

Après en avoir sélectionné un, l'entrée est remplie avec la valeur et non le texte interne. Je veux seulement que l'utilisateur voit le texte ("La réponse") dans la liste déroulante et dans l'entrée, mais passe la valeur 42 sur soumettre, comme un select .

Comment puis-je faire en sorte que tous les navigateurs aient la liste déroulante qui affiche les étiquettes (texte interne) des <option> , mais envoie l'attribut value lorsque le formulaire est soumis?


Answers

la solution que j'utilise est

<input list="answers" id="answer">
<datalist id="answers">
  <option data-value="42" value="The answer">
</datalist>

l'accès à la valeur à envoyer au serveur via JavaScript comme

var shownVal= document.getElementById("answer").value;
var value2send=document.querySelector("#answers option[value='"+shownVal+"']").dataset.value;

J'espère que cela aide


C'est très simple: Essayez-le:

<input list="answers" name="answer" placeholder="42">
<datalist id="answers">
    <option value="42">The answer</option>
</datalist>

En utilisant PHP, j'ai trouvé un moyen assez simple de le faire. Les gars, utilisez juste quelque chose comme ça

<input list="customers" name="customer_id" required class="form-control" placeholder="Customer Name">
            <datalist id="customers">
                <?php 
    $querySnamex = "SELECT * FROM `customer` WHERE fname!='' AND lname!='' order by customer_id ASC";
    $resultSnamex = mysqli_query($con,$querySnamex) or die(mysql_error());

                while ($row_this = mysqli_fetch_array($resultSnamex)) {
                    echo '<option data-value="'.$row_this['customer_id'].'">'.$row_this['fname'].' '.$row_this['lname'].'</option>
                    <input type="hidden" name="customer_id_real" value="'.$row_this['customer_id'].'" id="answerInput-hidden">';
                }

                 ?>
            </datalist>

Le code ci-dessus permet au formulaire de porter l'identifiant de l'option également sélectionnée.


Notez que datalist n'est pas le même qu'un select . Il permet aux utilisateurs d'entrer une valeur personnalisée qui ne figure pas dans la liste, et il serait impossible d'extraire une autre valeur pour cette entrée sans la définir en premier.

Les manières possibles de gérer les entrées de l'utilisateur sont de soumettre la valeur saisie telle quelle, de soumettre une valeur vide ou d'empêcher la soumission. Cette réponse ne gère que les deux premières options.

Si vous voulez interdire complètement l'entrée de l'utilisateur, peut-être que select serait un meilleur choix.

Pour afficher uniquement la valeur textuelle de l' option dans la liste déroulante, nous utilisons le texte interne et excluons l'attribut value . La valeur réelle que nous voulons envoyer est stockée dans un attribut de data-value personnalisé:

Pour soumettre cette data-value nous devons utiliser un <input type="hidden"> . Dans ce cas, nous laissons le name="answer" sur l'entrée régulière et le déplaçons vers la copie cachée.

<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
    <option data-value="42">The answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

De cette façon, lorsque le texte de l'entrée d'origine change, nous pouvons utiliser javascript pour vérifier si le texte est également présent dans le datalist et récupérer sa data-value . Cette valeur est insérée dans l'entrée cachée et soumise.

document.querySelector('input[list]').addEventListener('input', function(e) {
    var input = e.target,
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option'),
        hiddenInput = document.getElementById(input.id + '-hidden'),
        inputValue = input.value;

    hiddenInput.value = inputValue;

    for(var i = 0; i < options.length; i++) {
        var option = options[i];

        if(option.innerText === inputValue) {
            hiddenInput.value = option.getAttribute('data-value');
            break;
        }
    }
});

La answer id et answer-hidden sur l'entrée régulière et cachée sont nécessaires pour que le script sache quelle entrée appartient à quelle version cachée. De cette façon, il est possible d'avoir plusieurs input sur la même page avec un ou plusieurs datalist fournissant des suggestions.

Toute entrée de l'utilisateur est soumise telle quelle. Pour soumettre une valeur vide lorsque l'entrée utilisateur n'est pas présente dans le datalist, remplacez hiddenInput.value = label par hiddenInput.value = ""

Exemples jsFiddle fonctionnels: javascript simple et jQuery


Juste une autre recommandation. Le plugin Purl permet de récupérer toutes les parties de l'URL, y compris l'ancre, l'hôte, etc.

Il peut être utilisé avec ou sans jQuery.

L'utilisation est très simple et cool:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

Cependant, à compter du 11 novembre 2014, Purl n'est plus mis à jour et l'auteur recommande d'utiliser URI.js place. Le plugin jQuery est différent en ce sens qu'il se concentre sur les éléments - pour une utilisation avec des chaînes, utilisez simplement l' URI directement, avec ou sans jQuery. Un code similaire aurait l'air en tant que tel, une documentation plus complète here :

var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'




javascript html html5 cross-browser html-datalist