Discussion :

[noradan]

bonjour
Je suis entrain de tenter de faire un petit moteur de recherche pour mon site perso avec un formulaire qui lance un php qui lance des requêtes !
Comment fait-on pour qu'un petit menu déroulant s'affiche avec des choix pertinents pendant qu'on écrit dans le formulaire, comme ça se passe dans pas mal de moteur de recherche ?
Merci

[gabi7756]

Tu récupère la data dans ton input

Code :

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

1
2
 
document.querySelector('#input').value

Tu vas interroger ton script php qui récupère les résultats ? C'est fait ?
Cf :

Code :

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

1
2
 
// Cherche Fetch ou ajax

Ensuite côté code html tu vas rajouté une div / table ou ce que tu veux pour stocker tes résultats de recherche


Et maintenant reste plus que la remplir avec les résultat de recherche

Code :

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

1
2
3
4
5
6
7
8
9
 
var div = document.createElement('div')
div.style="..."
div.id="..."
div.textContent="Résultat recherche"
div.addEventListener('click',function(){
document.querySelector('#input').value=this.value
})
document.querySelector('#ton conteneur qui va stocker tes résultats de recherche').appendChild(div)

NB : j'ai oublié de précisé que tu fais une boucle sur le tableau de résultat récupéré depuis ton php

Du coup dans l'ordre ca fait :

1- Fait ton conteneur html qui va contenir tes résultats

2- Fait ton script php qui va récupéré les résultats avec une string en entrée

3- Tu récupère la valeur saisie dans l'input

4- Tu fais l'appel ajax/fetch sur le fichier php via la précédente valeur récupéré

5- Puis tu affiches x résultats dans ton conteneur via une boucle
Sans oublié de mettre un evenement lors du click sur un résultat

Un truc comme ca

[noradan]

Wahou !

Ca n'a pas l'air simple.
Mais je ne vois pas comment ça répond à ce que je souhaite...
Tu parle de résultat de la requête... mais il n'y a encore aucun résultat puisque celle-ci n'a pas encore été validée.

Ce que je veux c'est qu'après avoir écrit "nov" dans la case "rechercher" il apparaisse un petit menu qui propose "Novalis, Novella, Novlangue" si ces trois mots figurent dans ma table.
J'imagine qu'il faudrait accéder à l'index de la table...

[mathieu]

résultat de la requête...

vous parlez plutot du résultat de la recherche ? c'est important de bien préciser de quoi vous parlez parce que pendant les quelques secondes où l'utilisateur tape le texte de sa recherche, il se passe beaucoup de choses et parmi celles ci, il y a des requêtes http et des requêtes sql.

celle-ci n'a pas encore été validée.

vous parlez de valider la recherche en cliquant sur le bouton "rechercher" ? dans le cas d'un menu déroulant, c'est le code javascript dans le navigateur qui va lire le texte saisi à chaque appui sur une touche.
comme je l'écrivais avant, il se passe beaucoup de chose pour afficher des suggestions pendant la saisie donc ça pourrait vous aider de découper tout cela en petites parties.

et la 1re partie serait, par exemple, de faire un champ texte avec un code javascript qui affiche "Novalis, Novella, Novlangue" quand l'utilisateur tape "nov".
vous pouvez vous inspirer de l'exemple là :
https://developer.mozilla.org/en-US/...event#examples