Discussion :

[BROADSIDER]

Bonjour,
Je suis en ce moment entrain de crée un site web avec trois onglets comprennant chacun des "étiquettes" qui ont chacune un nom. J'ai aussi une barre de recherche avec auto-complétion permettant de rechercher ces "étiquettes". Mais pour l'instant la barre de recherche affiche juste le nom de ces dernières, j'aimerais donc savoir s'il est possible de créé une fonction qui "examinerais" le nom à l'intérieur de la barre de recherche, et qui ensuite modifirais les propriétés css de chaque étiquette. Grossièrement une fonction qui fasse ça:

If(nom===etiquette)
Afficher l'etiquette du même nom
Else(nom!==etiquette)
Autres etiquette display none

Sachant que je fais apparaitre mes étiquettes par php et que leurs champs dans mon code correspond à $liste['nom'].
J'espère que quelqu'un pourra me venir en aide.

[Millezime]

Bonjour,

Regardez du côté de javascript et des écouteurs comme onKeyUp.
De la doc : https://developer.mozilla.org/en-US/...b/Events/keyup

Bon courage

[BROADSIDER]

J'ai pris le temps d'analyser la documentation que vous m'avez conseillé mais n'ai pas compris en quoi elle m'etait utile 😅 Car le key up permet d'enregistrer des événement après avoir appuyer sur certaines touche, or moi je cherche une fonction qui me récupère ce qu'entre l'utilisateur, et ensuite en appuyant sur un bouton par exemple ou même instantanément sans avoir besoin de cliquer nul part, sa lui affiche les objets ayant exactement le même nom que ca recherche. Cela en changeant par exemple comme je le disais dans le message precedent le display de tout les objets en mettant sur none quand le nom de l'objet et differenet du nom entré dans la barre de recherche, et par contre afficher les objet ayant le meme nom.

[Millezime]

Alors là, vous expliquez ce que peu réaliser onKeyUp, sans le comprendre, et en ayant lu la doc.........

Car le key up permet d'enregistrer des événement après avoir appuyer sur certaines touche, or moi je cherche une fonction qui me récupère ce qu'entre l'utilisateur, et ensuite en appuyant sur un bouton par exemple ou même instantanément sans avoir besoin de cliquer nul part, sa lui affiche les objets ayant exactement le même nom que ca recherche.

Je ne vois pas le problème....

Bon comme je sens que vous attendez une réponse toute faite.... (attention il y a du jQuery et faudra adapter à votre besoin...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="search"/>
 <div class="element-holder ">
<div class="element" data-name='etiquette1' id='1'>etiquette BROADSIDER
<div class="element" data-name='etiquette2' id='2'>BROADSIDER etiquette
</div>
<div class="element" data-name='etiquette3' id='3'>La troisième superbe étiquette de BROADSIDER
</div>
</div>
 
<script>
$(".search").keyup(function () {
 
        var filter = $(this).val(), count = 0;
        $(".element-holder .element").each(function () {
 
            var current = $('.element').attr('data-name');
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
            } else {
                $(this).show();
                count++;
            }
        });
 
    });
</script>

Et histoire que vous essayez ça directement via votre superbe navigateur...
https://jsfiddle.net/b0dp46L8/

[BROADSIDER]

Je suis vraiment désolé mais je ne suis pas encore capable de créer des codes comme ca ... Mais merci beaucoup vous me permettez de beaucoup avancer dans mon projet car c'est exactement ce que j'attendais.
PS : Vous m'avez flatter de dire que mes étiquettes etaient superbes😉
Bonne soirée!

[Millezime]

Si vous souhaitez également faire des interactions "plus dynamique" pour permettre au client d’interagir avec le serveur, il y a AJAX qui fait très bien l'affaire.

Bon courage