Trigger un input (qui agit comme une barre de recherche) en insérant un mot [Résolu]

Signaler
Messages postés
5
Date d'inscription
samedi 5 décembre 2020
Statut
Membre
Dernière intervention
16 décembre 2020
-
Messages postés
5
Date d'inscription
samedi 5 décembre 2020
Statut
Membre
Dernière intervention
16 décembre 2020
-
Bonjour tout le monde.

Mon but est de trigger mon input (qui agit comme une barre de recherche) en insérant un mot (avec un bouton). Actuellement mon input n'est pas trigger (j'ajoute le mot avec un bouton mais le barre de recherche ne prend pas en compte le mot ajouté). Avez-vous des conseils svp ? Merci d'avance pour votre aide. NB: J'ai regardé les scripts de simulation de touches clavier (sans succès) + " .on('input' " (mais je ne suis pas sûre que cela puisse m'aider).

Pour voir mes scripts en fonctionnement = https://jsfiddle.net/4k9gxvho/.

Sinon ici =

<input id="searchbar" onkeyup="fsearch()" type="text">
<br />
<span class="choice">A</span>
<span class="choice">B</span>
<br />
<button onclick="word_insertion(this)" data-product-name="A">Insert A</button>

<!-- Script = Insertion mot  -->
<script>
function word_insertion(element){
document.getElementById('searchbar').value = element.getAttribute('data-product-name');}    
</script>

<!-- Script = Barre de recherche -->
<script>
function fsearch(){ 
let input = document.getElementById('searchbar').value 
input=input.toLowerCase(); 
let x = document.getElementsByClassName('choice');       
for (i = 0; i < x.length; i++) {  
if (!x[i].innerHTML.toLowerCase().includes(input)) { x[i].style.display="none"; }
else { x[i].style.display="list-item";                  
}}}
</script>







Configuration: Windows / Chrome 85.0.4183.102

2 réponses

Messages postés
30862
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
6 janvier 2021
3 145
Bonjour,

Je ne suis pas sûr de comprendre ce que tu veux ....
Trigger signifie Déclencher .... hors.. on ne déclenche pas un input ....

J'ai l'impression que tu aimerais que ta fonction fsearch soit déclenchée une fois le mot inséré .. c'est bien ça ??

Dans ce cas, il suffit d'appeller ta fonction à la suite de ta fonction fsearch
<script>
// Script = Insertion mot  
function word_insertion(element){
   document.getElementById('searchbar').value = element.getAttribute('data-product-name');
   fsearch();
}    

// Script = Barre de recherche 
function fsearch(){ 
  let input = document.getElementById('searchbar').value 
  input=input.toLowerCase(); 
   let x = document.getElementsByClassName('choice');       
   for (i = 0; i < x.length; i++) {  
      if (!x[i].innerHTML.toLowerCase().includes(input)) { 
           x[i].style.display="none"; 
      } else { 
          x[i].style.display="list-item";                  
      }
    }
}
</script>



PS: Comme tu peux le voir, il n'est pas necessaire d'ouvrir/fermer plusieurs balises script... une seule suffit pour englober tout ton code JS
PS²: Le code, bien indenté... est largement plus facile à lire
J'espère que tu en prendras bonne note pour tes prochains codes.


Cordialement,
Jordane
Messages postés
5
Date d'inscription
samedi 5 décembre 2020
Statut
Membre
Dernière intervention
16 décembre 2020

Bonjour. Je ne pensais pas que se serait aussi simple! J'avais déjà essayé de tout englober dans un seul script (voir mon https://jsfiddle.net/4k9gxvho/) par contre je n'avais encore jamais appelé la seconde fonction à la fin de la première. Très bonne idée, merci encore !