web-dev-qa-db-fra.com

Événement jQuery lorsque vous cliquez sur l'option HTML5 Datalist

Ce que j'ai maintenant:

J'ai donc cette liste de données HTML5 avec un tas d'options, et j'ai 2 événements déclenchés. Un lorsque l'utilisateur tape quelque chose qui correspond à quelque chose le tableau de noms qui remplit les options telles que "Rick Bross" ou "Jack Johnson" (keyup). Un autre événement qui se déclenche lorsqu'un utilisateur commence à taper le nom, il apparaît, l'utilisateur flèches vers le bas et frappe "Entrée" (changement).

Le problème:

J'ai besoin d'un événement à déclencher lorsque l'utilisateur clique sur l'une des options de la liste déroulante, AVANT qu'il tape le nom complet et avant que l'objet ne soit flou. Si un utilisateur clique dessus juste avant que le nom ne soit complètement tapé, les 2 événements ne déclenchent la fonction qu'une fois que l'entrée est floue.

Le balisage:

<datalist id="potentials">
    <option value="Rick Bross">  
    <option value="Jack Johnson">  
    <option value="Rick Bross">  
    <option value="Rick Bross">   
</datalist>

événements et fonctions Javascript:

window.checkModelData = function(ele)
{
    var name = $(ele).val().replace(" ", "");
    var mod = potentialModels[name];
    if(mod) {
        loadModelData(name);
    }
}

function loadModelData(name) {
    var mod = potentialModels[name];
    $("#address").val(potentialModels[name].address);
    $("#city").val(potentialModels[name].city);
    $("#state").val(potentialModels[name].state);
    $("#email").val(potentialModels[name].email);
    $("#phone").val(potentialModels[name].phone);
    $("#Zip").val(potentialModels[name].Zip);
}

$("#name").keyup(function(){

    window.checkModelData(this);

});
$("#name").change(function(){

    window.checkModelData(this);
});
jqueryhtmloptionhtml-datalist
19
Rick Bross

Utilisez l'événement input au lieu des autres événements. Il est en fait conçu pour couvrir ce que vous voulez:

$("#name").bind('input', function () {
    window.checkModelData(this);
});

J'ai fait un jsfiddle pour que vous puissiez l'essayer.

18
likeitlikeit

Vous pouvez également écouter l'événement "select" dans le champ de saisie.

$('#name').bind('select', function() {
    // handle input value change
});
0
Gilles Hooghe