web-dev-qa-db-fra.com

L'événement jQuery pour la base de données HTML5 lorsque l'élément est sélectionné ou saisi correspond à l'élément de la liste

J'ai un datalist comme ci-dessous -

<input id="name" list="allNames" />
<datalist id="allNames">
    <option value="Adnan1"/>  
    <option value="Faizan2"/>   
</datalist>

Ce que je veux, c'est quand un élément est tapé complètement (par exemple dire dans la zone de saisie lorsque l'utilisateur tape complètement "Adnan1") ou sélectionné dans la liste, alors je veux un événement. J'ai essayé quelques approches mais les deux ne m'aident pas jusqu'à présent. Les approches sont -

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

problème avec ceci est que l'événement n'est déclenché que lorsque l'entrée est floue, c'est-à-dire quand je clique quelque part sur l'écran.

J'ai aussi essayé

$("#name").bind('change', function () {
    console.log('changed'); 
});

mais le rappel est déclenché à chaque fois que je tape. J'ai en fait besoin de faire un appel AJAX lorsque l'élément est complètement sélectionné. Soit par saisie ou en sélectionnant dans la liste déroulante.

La première approche est mauvaise pour le point de vue de l'utilisateur car il doit faire un clic supplémentaire et la seconde a un inconvénient car pour chaque lettre un événement sera déclenché.

Tout ce que je veux, c'est un événement lorsque l'utilisateur a fait une sélection ou tapé une phrase complète. existe-t-il un moyen d'y parvenir? tout événement qui me manque et qui peut résoudre mon problème.

javascriptjqueryhtml5javascript-events
24
Mohammad Adnan

Sur navigateurs modernes , vous pouvez utiliser l'événement input, par exemple:

$("#name").on('input', function () {
    var val = this.value;
    if($('#allNames option').filter(function(){
        return this.value.toUpperCase() === val.toUpperCase();        
    }).length) {
        //send ajax request
        alert(this.value);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="name" list="allNames" />
<datalist id="allNames">
    <option value="Adnan1" />
    <option value="Faizan2" />
</datalist>

PS: comme l'événement input a un meilleur support que l'élément datalist , il n'y a en effet aucune raison de ne pas l'utiliser si vous utilisez déjà l'élément datalist.

43
A. Wolff

Vous pouvez utiliser l'événement input pour obtenir ces fonctionnalités, comme ci-dessous:

$(document).ready(function() {
  $('#name').on('input', function() {
    var userText = $(this).val();

    $("#allNames").find("option").each(function() {
      if ($(this).val() == userText) {
        alert("Make Ajax call here.");
      }
    })
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" list="allNames" />
<datalist id="allNames">
  <option value="Adnan1" />
  <option value="Faizan2" />
</datalist>
5
Ankit

Solution simple

document.getElementById('name').addEventListener('input', function () {
   console.log('changed'); 
});
1
Salman Haider

Vérifiez si this fonctionne pour vous:

var dataList=[];
$("#allNames").find("option").each(function(){dataList.Push($(this).val())})
console.log(dataList);
$("#name").on("keyup focus blur change",function(){
    if(dataList.indexOf($(this).val())!=-1)
console.log("change");
})

J'ai poussé les options de la liste de données dans le tableau, et lors de la modification de la touche, du flou ou du focus de l'événement, je vérifie si la valeur d'entrée existe dans mon tableau de données.

0
Mohmad Taher