événement jQuery lorsque L'option Datalist HTML5 est cliquée

Ce que j'ai maintenant:

donc j'ai ce Dataliste HTML5 avec un tas d'options dedans, et j'ai 2 évènements qui tirent. Une fois que l'utilisateur tape quelque chose qui correspond à quelque chose le tableau de noms qui peuplent les options telles que "Rick Bross" ou "Jack Johnson" (keyup). Un autre événement qui déclenche quand un utilisateur commence à taper le nom, il apparaît, les flèches de l'utilisateur vers le bas, et hits "enter" (change).

Le problème:

je besoin d'un événement pour tirer quand l'utilisateur clique sur l'une des options de dépose vers le bas, avant qu'il tape le nom complet, et avant que l'objet soit flou. Si un utilisateur clique sur l'un d'eux immédiatement 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.

La Balise:

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

Javascript, des événements et des fonctions:

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);
});
17
demandé sur unor 2013-04-16 06:25:34

3 réponses

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

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

j'ai fait un jsfiddle pour vous de l'essayer.

16
répondu likeitlikeit 2013-05-03 18:44:27

Vous pouvez aussi écouter l'événement' select'sur le champ d'entrée.

$('#name').bind('select', function() {
    // handle input value change
});
1
répondu Gilles Hooghe 2015-09-10 08:51:28

Pour gérer cliquez seulement sur l'événement ici est la solution.

$("#book_search").bind('select', function () {
    alert("changed");   
});
-1
répondu Paras Kathiriya 2016-09-05 12:54:26