Salut, j'ai un peu du mal a prononcer ma question.
J'essaye de faire une barre de recherche avec les résultats qui s'affichent juste en dessous de la barre en temps réel.

J'ai créé la "logique" du filtrage de la barre de recherche en fonction mais je n'ai aucune idée de comment je pourrais l'afficher.
Je suis débutant en Javascript et normalement ma fonction trie les fichiers JSON par leurs "title", maintenant faut pouvoir afficher les résultats en dessous de la barre de recherche si quelqu'un pourrait m'éclairer

// Search bar

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');

// Search Data.json and filter it
const searchStates = async searchText => {
  const res = await fetch('../src/Data.json');
  const states = await res.json();

  //Get matches to current text input
  let matches = states.filter(state => {
    const regex = new RegExp(`^${searchText}`, 'gi');
    return state.title.match(regex);
  });

  if(searchText.length === 0) {
    matches = [];
  }

  console.log(matches);
};

search.addEventListener('input', () => searchStates(search.value));

Bonjour,

Et bien par exemple, il faut que tu ai une div avec un id

<div id="resultSearch"></div>

Et le Javascript va se charger de remplir la div search en fonction de tes résultats.

Pour ajouter du HTML dans cette div tu peux utiliser en js

document.getElementById('resultSearch').innerHTML = '<strong>Ceci est un exemple</strong>';

Et il ajouteras <strong>Ceci esr un exemple</strong> dans la div resultSearch

Je pense que y a pas mal de mauvaises pratiques dans ton code :
Déjà tu devrais utiliser les queryParams dans ton fetch en lui passant une query (ton searchText) et ensuite selon les queryParams tu fais ta logique. https://stackoverflow.com/questions/9870512/how-to-obtain-the-query-string-from-the-current-url-with-javascript

J'ai l'impression que la déclaration de matches est un peu problématique vu que tout est asynchrone, j'imagine que tu vas peut être rencontrer des bugs, peut-être utiliser .then ce serait mieux

Ta fonction doit avoir un return matches

Le regex est vraiment bourrin, tu pourrais juste faire states.filter(({title}) => title.toLocaleString().includes(search.toLocaleString()))

Dans ton addEventListener, tu devrais juste appeler la fonction comme ça : search.addEventListener('input', searchStates); et aller chercher la value dans la fonction, je te conseille de prendre tout de suite cette habitude, lorsque tu voudras enlever un eventListener ce sera beaucoup plus simple.

Sinon VDD a tout dit pour le côté pratique dans l'html

Bon courage