Recherche dans un tableau JS

a marqué ce sujet comme résolu.

Bonjour à tous. Je refais ma demande afin qu’elle soit plus explicite. :D
Tout d’abord merci pour toutes vos aides vous êtes au top et non seulement vous me débloquez mais en plus vous m’expliquez !

Le JavaScript n’est vraiment pas ma tasse de thé ! :p Avant toute chose, je vous mets le lien de la page et vous explique par la suite. Voici le lien [(https://www.fut4fun.fr/totw.php)]

J’aimerai utiliser la barre de recherche afin que l’on puisse afficher l’image de notre choix mais je ne sais pas du tout comment m’y prendre.

Voici mon code html :

<section class="totw">
    <h1>L'équipe de la semaine</h1>
    <nav class="toolbar hide">
        <a id="toolbar-toggle" href="#">Autres TOTW <i class="fas fa-arrow-circle-down"></i></a>
        <ul class="hide">
            <li><input type="search" ><button type="submit" id="search" title="Rechercher une TOTW" aria-label="Rechercher une TOTW"><i class="fas fa-search"></i></button></li>
            <li><button id="slider-previous" title="TOTW précédente"><i class="fas fa-arrow-left"></i></button></li>
            <li><button id="slider-toggle" title="Faire défiler les TOTW"><i class="fas fa-play"></i></button></li>
            <li><button id="slider-next" title="TOTW suivante"><i class="fas fa-arrow-right"></i></button></li>
            <li><button id="slider-random" title="Sélectionner une TOTW aléatoire"><i class="fas fa-random"></i></button></li>
        </ul>
    </nav>

    <article>
        <figure id="slider" class="slider">
         <!-- afterbegin -->
        <img src="img/totw/totw1.jpg" alt="TOTW1">
            <figcaption></figcaption>
        </figure>
    </article>
    <!-- Code principal du carrousel -->
    <script src="js/slider.js"></script>

</section>
```

Comment récupérer la valeur saisie dans l'input et afficher l'image correspondante.  
Voici mon code JS :

```JavaScript
var slides =
[
    { image: 'img/totw/totw1.jpg', legend: 'TOTW #1'           },
    { image: 'img/totw/totw2.jpg', legend: 'TOTW #2'           },
    { image: 'img/totw/totw3.jpg', legend: 'TOTW #3'           },
    { image: 'img/totw/totw4.jpg', legend: 'TOTW #4'           },
    { image: 'img/totw/totw5.jpg', legend: 'TOTW #5'           },
    { image: 'img/totw/totw6.jpg', legend: 'TOTW #6'           },

];

```

J'espère avoir été assez clair.
Je vous remercie par avance
+0 -0

Plutôt que de nous donner un lien vers ton site, qui par ailleurs est extrêmement complexe et lourd (120 requêtes pour charger une simple page), donne-nous plutôt des extraits de ton code qui sont en lien avec tes questions.

  • 1er problème : L’image ne se charge pas. Alors qu’en local tout fonctionne. Je ne comprends pas
fut4fun

Ta page contient un <img src="" alt="TOTW"> sans aucune source. À priori un problème avec ton code PHP plutôt.

Comment récupérer le post (ou get) de la recherche et afficher l’image souhaitée? Par exemple si l’on ecrit 4 dans la barre de recherche comment afficher l’image de la TOTW 4?

fut4fun

Qu’est-ce que tu n’arrives pas à faire exactement ? À priori tes images sont listées dans un objet slides, tu peux donc t’inspirer du code suivant qui va récupérer l’image dont la légende correspond au terme "4" :

slides.find(({ legend }) => legend.includes("4"))
+0 -0

Ajoute un ID à ton <input> (par exemple "search-input") et récupère sa valeur avec getElementById:

const term = document.getElementById("search-input").value
const slide = slides.find(({ legend }) => legend.includes(term))

Note que slide sera undefined si aucune élément ne correspond à la recherche.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte