é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);
});
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.
Vous pouvez aussi écouter l'événement' select'sur le champ d'entrée.
$('#name').bind('select', function() {
// handle input value change
});
Pour gérer cliquez seulement sur l'événement ici est la solution.
$("#book_search").bind('select', function () {
alert("changed");
});