Discussion :

[Melex]

Bonjour,

J'affiche une page php avec une liste de nom-prénom.

J'aimerais avoir un champ "Recherche" au dessus dans lequel lorsque je taperais une lettre, seul les nom commençant par cette lettre s'afficherait ( sans avoir à cliquer sur un bouton "OK" si possible).

Mon problème c'est que je ne sais pas quel est le nom donné à cette technique donc j'ai du mal à trouver quelque chose sur le net.

Pouvez-vous m'aider ?

Merci

Mélanie

[SpaceFrog]

autocomplétion
ça devrait t'aider à rechercher

[emmanuel.remy]

Salut,

Ta liste est visible, et en tapant une ou plusieurs lettres tu la filtres.

ERE

[Melex]

C'est bien ça merci !

[Melex]

J'ai trouvé un très bon code sur le site que j'ai voulu adapter mais cela ne marche pas.

Voici le code que j'ai changé :

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
28
29
30
31
32
 
        // Connexion à la base de données
	$Connexion = Connexion (NOM, PASSE, BASE, SERVEUR);
 
	// Création de la requête sql
	$Requete_sql = "SELECT nom_patient FROM patient ORDER BY nom_patient"; 
 
	// Exécution de la requête sql
	$Execution_requete = ExecRequete( $Requete_sql, $Connexion );
 
	// Récupération des données 	
	while($Resultat = LigneSuivante($Execution_requete))
	{
		$nom = $Resultat['nom_patient'];
		echo $liste[] = $nom;	
 
	}
 
	$debut = strtolower($debut);
 
	//$liste = array("abeille","abricot","acheter","acheteur","adjectif","adroit","adroitement","agent","aigle","aile","air","amour","âne","approcher","ardoise","arête","arracher","asperge","astre","aujourd'hui","au lieu de","aussi","autobus","autocar","autruche","avant","avertir","aviation","avril","bain","bal","balcon","balle","ballon","banc","bande","banque","barque","bas","basse","bassin","bataille","bâton","bavarder","baver","bavette","bazar","beau","belle","bec","bêler","bête","bidon","bien","bille","billet","biscuit","bise","blanc","blancheur","blanchir","bleu","bord","bordure","borne","botte","bottine","boucher","bouchon","boucle","boue","boulanger","boulangerie","bouquet","bouteille","boutique","bras","brioche","briquet","brise","briser","brochet","brosse","brosser","brouette","bureau","cachette","cadre","campagne","canal","canard","capitaine","carnaval","carnet","case","castor","chacun","chameau","chant","chapeau","chapelle","chaque","chaton","chaud","chaudement","chef","chenille","chevalier","cheville","chocolat","chose","choucroute","cidre","ciel","cinq","cirque","clocher","clochette","clou","combien","comment","compagne","compagnie","compagnon","compliment","conduire","conduite","confortable","conjuguer","contenir","continuer","coq","coquin","corbeau","corbeille","corde","corne","cornet","corniche","coton","cou","couchette","coudre","coupant","cour","courir","course","couverture","couvrir","craie","crâne","crier","croire","croix","cuire","cuisine","cuisson","cuit","cuivre","cuve","date","décembre","découverte","demi","démonter","dent","depuis","dernier","derrière","dessin","dessiner","dessous","devant","dire","direct","directement","diriger","disque","diviser","division","dix","docteur","domestique","donner","dos","double","douloureux","doux","douce","douze","dragon","dur","durée","durer","eau","écaille","échapper","écharpe","échelle","écolier","écouter","écrevisse","écrire","écriteau","écurie","élémentaire","éleveur","en bas","encore","encrier","encre","endormir","enfantin","enfermer","enfin","en haut","ensuite","entier","entrée","épicerie","épine","épingle","éplucher","escalier","escargot","estrade","étrange","fabrique","fabriquer","fatigue","féminin","fenêtre","fer","fermer","feuille","feutre","fidèle","film","fils","fin","fleuriste","foin","folie","fondre","fontaine","force","forme","formidable","fort","fortement","fourche","franc","franche","frère","frileux","fruit","fuite","fumer","gamin","garage","garde","garde","garder","gardien","garnir","gauche","genre","gerbe","gibier","gilet","girafe","gomme","grammaire","grandeur","grandir","gras","grasse","grave","grenouille","gris","grossir","groupe","haut","hauteur","herbe","heure","hibou","hier","histoire","hiver","ici","idée","injuste","insecte","inspecteur","instrument","invisible","jambe","janvier","jaune","jeune","joie","joue","jouet","joueur","juillet","juin","jument","jusqu'à","labourer","lac","langue","larme","lavage","laver","lécher","leçon","léger","légume","lettre","lèvre","lièvre","linge","liquide","litre","livret","loin","long","longue","lorsque","loup","lueur","lunettes","lutte","machine","mademoiselle","magasin","mai","maintenant","maisonnette","maître","maîtresse","majuscule","malin","mari","masculin","matière","matinal","mauve","mélange","mélanger","mémoire","ménagerie","menteur","menu","mer","merci","mercredi","merle","merveille","messe","métier","mie","miel","le mien","miette","mine","minuit","miracle","moderne","moineau","mois","moment","monstre","montagne","montre","montrer","morue","moteur","motif","moucheron","mouchoir","moudre","mouette","moutarde","mouvement","muraille","murmure","murmurer","nappe","né","neuf","nez","nid","noël","noir","nom","nombre","nouer","nuageux","nuit","nul","odeur","oie","oncle","ongle","or","orage","orageux","oreille","ours","ourson","ouvert","ouvrage","ouvrier","paille","pain","paire","panier","pantalon","papier","papillon","parcourir","pardon","parent","parfait","parole","partage","partager","partie","partir","partout","parvenir","passé","passer","pastille","pâte","patron","patte","pays","peau","pêche","pêcher","pêcheur","peine","pendant","pendre","pépin","perche","perdant","perdre","perte","peureux","pie","pièce","pied","piège","pierre","piéton","pioche","piocher","piquet","place","plage","plaine","plaisir","planter","plaque","plat","pleurer","plonger","pluie","pluriel","pochette","point","pointe","poirier","poitrine","pompe","pomper","pondre","porter","pot","pouce","poudre","pourquoi","pourtant","prairie","pratique","presque","prince","princesse","problème","produire","produit","promenade","promeneur","propre","proprement","provenir","puis","puisque","punir","pur","purée","quatre","quoi","racine","radis","rage","raie","raisin","rame","ramener","raquette","rare","rarement","rebord","recopier","recoudre","recouper","reculer","redevenir","réduire","regard","régime","renard","rencontre","rencontrer","repartir","repasser","répondre","réponse","reprendre","reproduire","requin","respiration","respirer","réunion","richesse","ride","risque","rivage","rivière","robinet","robot","rocher","rond","rondelle","rosée","roue","rude","ruelle","rugir","salle","saluer","s'amuser","sans","sardine","sauvage","sauver","savoir","secouer","se fatiguer","sel","semelle","se moquer","se munir","s'envoler","se rendormir","se souvenir","seul","siège","signe","singulier","soie","soirée","soldat","solidement","sombre","somme","sonner","sonnerie","sorcière","sorte","sot","sotte","sottise","souper","soupière","sous","souvent","spectateur","sport","sportif","sucrier","sueur","suivant","sujet","superbe","surprise","surtout","tableau","tablier","tabouret","tache","taupe","taille","tante","tapage","taper","taureau","tenir","tenue","tigre","timbre","tirer","tissage","tisser","titre","toile","tondre","tordre","train","traire","tranche","traverser","trèfle","trésor","tresse","tricher","tricheur","tristement","trompe","trou","truite","unité","usage","usé","utile","utilité","vague","valeur","valoir","vanille","vapeur","vendeur","vendre","vent","vente","ventre","verger","vernir","vert","verte","veste","viande","victoire","vide","vider","vieux","vif","vive","villa","vinaigre","violette","vipère","virgule","visible","vitesse","vitre","vitrine","vivement","vivre","vocabulaire","voile","voile","voisin","voisinage","vouloir","voyage","voyageur","zèbre","zéro");	
 
	function generateOptions($debut,$liste) {
		$MAX_RETURN = 10;
		$i = 0;
		foreach ($liste as $element) {
			if ($i<$MAX_RETURN && substr($element, 0, strlen($debut))==$debut) {
				echo(utf8_encode("<option>".$element."</option>"));
				$i++;
			}
		}
	}

Je pense que l'erreur est bête mais je bloque ...

Que pourrait-être le problème ?

Merci

Mélanie

[emmanuel.remy]

Re,

Pourquoi ne pas plutôt ajouter une clause WHERE dans ta requête SQL ?

ERE

[Melex]

Est-ce que le résultat pourra s'afficher sans qu'on est besoin de cliquer sur un bouton "Rechercher" ?

[emmanuel.remy]

Re,

Attention il faut que tu choisisses:

• Soit toutes tes données sont envoyées initialement avec la page web et alors le code pour filtrer est du code javascript uniquement
• Soit tes données sont envoyées vers ta page au fur et à mesure de la saisie de l'utilisateur, ce qui implique de faire des allers-retours vers le server et d'utiliser une technique comme AJAX pour l'échange.

Tout dépend donc de ta façon de procéder, elle-même liée à divers paramètres comme le volume des données (l'approche est différente selon que tu as 100 ou 1000 patients), etc...

ERE

[Melex]

Re,

donc si ma base de données contient plus de 1000 patients, tu me conseillerais quelle technique ? Partir sur de l'AJAX n'est pas la bonne solution ?

[SpaceFrog]

plus la table est volumineuse plus il faut s'orienter vers le traitement serveur

[emmanuel.remy]

Re,

Si tu ne veux pas recharger à chaque fois ta page, alors oui AJAX est fait pour ça.

Dans ce cas le filtrage des données est fait sur le server et comme SpaceFrog te le disait au début, on parle d'autocompletion. Tu peux voir un excellent tutoriel ici

ERE

[Melex]

C'est justement ce tuto que j'ai vu et que j'essaye d'adapter à mon projet.

J'ai mis l'extrait du code que j'ai modifié dans l'un de mes précédents post.

J'ai rajouté la connexion à ma base de données et la récupération des noms des patients et j'ai commenté le tableau qui est créé pour l'exemple.

Je ne vois pas d'où vient le problème ...

Une idée ?

Merci.

[emmanuel.remy]

Re,

Dans ce cas là, ne te prends pas la tête, mets un WHERE dans ta requête. Basiquement:

Code :

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

1
2
3
4
 
$debut = $_GET["debut"];
 
$Requete_sql = "SELECT nom_patient FROM patient WHERE nom_patient LIKE '$debut%' ORDER BY nom_patient";

ERE

[Melex]

Re,

j'arrive à le faire marcher simplement avec la clause where et en appuyant sur le bouton valider, mais pour un gain de temps, il faudrait vraiment que ça se fasse comme le tuto, dynamiquement.

Que faut-il changer dans le code du tuto pour l'adapter à une base de données ?