recherche incrémentale

lothar83fr · le 23 novembre 2007

bonjour

voilà j'aimerai pouvoir dans une sorte de liste déroulante qui permetrait de faire une recherche incrémental.

Pour ceux qui ne voient pas de quoi je parle je voudrais faire ceci

http://www.dil.univ-mrs.fr/~guizol/Examens/Exam1_06.html

Vous allez me dire bha voila ta tout ce qu'il te faut :transpi: .

Bha o faite moi j'ai dans de faire la même chose mais que toutes les entrée soient chargés à partir d'une base de données.

Donc j'ai sa.

 <select name="produits" size="5">

et j'aimerai remplir ce formulaire avec mes lignes de ma base de donnée.

et je sais pa comment faire.

merci par avance

tsubasaleguedin · le 23 novembre 2007

Pour la construction de ta liste tu peux faire comme ca :

			$result = mysql_query("Ma super requete SQL");

		if( !$result )

		{

		echo "la requete a échoué";

		}


		$liste = '<select name="media" id="select">';

		while( $row = mysql_fetch_array($result) )

		{

		$liste .= '<option value="' . $row['id'] . '">' . stripslashes($row['titre']) . '</option>';

		}

		$liste .= '</select>';



		echo $liste;

Apres le fitrage ca doit etre du javascript.

lothar83fr · le 28 novembre 2007

Dsl pr le retard mai merci quant même sa m'a beaucoup aidé.

Je ne savais pas qu'on pouvai mettre des balises html dans une variable et l'affiché après ^^.

j'avais mis des balises php de partout moi.

Donc j'arrive à remplir ma liste et donc je voudrais faire la recherche incrémental.

j'ai vue qu'on pouvais deja le faire quand on a le focus su la liste et qu'on tappe rapidement le nom.

Le problème c'est que c'est pas utilisable du fait qu'on ne puisse pas faire une pause dans l'écriture du mot complet.

Donc dans mon évènement OnKeyPress d'un champ je lui met ma fonction javascript qui va raffraichir ma liste.

Elle reçoit en paramètre ce qui est tappé dans le champ.

question 1

comment on récupère la valeur du champ <input type="text" name="nom" onkeyup="MajListe()">

c'est $nom ?

question 2

pour le rafraichissement de la liste, la première frappe sa ajoute les option dans la liste

mais à partir de la deuxième frappe on enleve des option... Comment on fait pour pour tout effacer?

merci par avance je sais qu'aider des newbee c relou même moi je le fait pas pour les language que je maitrise...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
   <head>
       <title>Test liste incrémental</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>    
<body>		
	<script type="text/javascript">
		function MajListe()
		{

		}
	</script>
	<?php

		/* connection a une base mysql en local */
		$connect = mysql_connect("localhost","root","") or die("Impossible de se connecter : " . mysql_error());
		echo "Connexion réussie <br />";

		/* selection de la base de donnée mysql */
		mysql_select_db("automate", $connect);

		/* la requête. */
		$result = mysql_query("SELECT * FROM produits WHERE CIP LIKE '3%' OR CIP LIKE '7%'", $connect);	
		//$result = mysql_query("SELECT * FROM produits", $connect);	
	?>  
	<form action="bdd.php" method="post">
	<p>
		<input type="text" name="nom" onkeyup="MajListe()"><BR>	 
		<?php
		$maListe='<select name="produits" size="5">';	
		 while ($row = mysql_fetch_array($result)) {  
			$maListe.='<option>' . stripslashes($row['libellé']) .'</option>';		 
		 }    		
		$maListe.='</select>'; 
		echo $maListe;
		?>
	</p>
	</form>					
		<?php					  
			/* fermeture de la connection */
			mysql_close($connect);		
		?>
   </body>
</html>

lothar83fr · le 29 novembre 2007

Help? :dtc:

BreizFenrir · le 29 novembre 2007

Complément à la réponse de tsubasaleguedin, en réaction au commentaire que tu en as fait: en fait, que tu mettes des balises HTML, XML ou quoi que ce soit d'autre (du RTF par exemple) dans une variable, PHP ne s'inquiète pas de savoir ce que c'est. De plus, comme il travaille côté serveur, le navigateur du client ne voit absolument pas les traitements effectués. De fait, tu peux faire pas mal de traitements potentiellement intéressants, comme construire l'intégralité du contenu de la page à partir de plusieurs fichiers, à l'aide de PHP. Tu peux même l'utiliser pour générer des CSS ou du Javascript (c'est un peu pousser le bouchon tout de même, à moins que cela soit la seule façon de répondre au cahier des charges).

Pour ce qui est de ta première question : l'accès au contenu d'un élément <input> nommé name se fait à travers l'appel suivant:

// Exemple d'affichage
alert(document.getElementByName('name').value);

// Exemple d'affectation
document.getElementByName('name').value="Ma valeur";

Pour la question 2 par contre, j'ai un peu de mal à voir ce à quoi ton explication correspond. C'est quoi la "première frappe" et la "seconde frappe" ? Entrer une lettre, puis une seconde ? J'arrive pas à voir l'utiliter de rajouter une lettre dans la liste, alors que l'on souhaite filtrer. En tout cas, en utilisant le DOM, tu dois pouvoir vider la liste en supprimant les fils de la balise <select>, ce qui se fait en une ligne, ou au pire une boucle. Il te faut par contre faire attention de garder en mémoire les éléments supprimés, pour quand l'utilisateur voudra faire une autre recherche sans quitter la page, ou se sera tout simplement trompé. Pour ca, le mieux à mon avis est d'avoir un tableau contenant l'ensemble des choix proposés dans le code javascript, utilisé par ce dernier à chaque reconstruction de la liste. Soit en code statique si il s'agit d'une liste courte qui n'a pas à être modifiée, ou une déclaration de variable générée par PHP. :francais:

Tu as toutes les cartes en main, au boulot ! :chinois:

Sentinel · le 29 novembre 2007

Deux remarques :

1. Un peu d'attention à l'orthographe, tu n'es plus en CP...

2. On répondra à des questions techniques précises, mais on ne fera pas l'exercice à ta place.

Pour le HTML et le Javascript, il existe des didacticiels sur w3schools.org par exemple.

Par ailleurs ton prof met à disposition des cours que tu devrais consulter : http://www.dil.univ-mrs.fr/~guizol/Le_Site...rsJ_Script.html

Pour le PHP, le site officiel est très bien documenté (php.net)

lothar83fr · le 30 novembre 2007

merci pour vos réponsses j'avance bien ^^

Sentinel je ne fais pas un exercice et ce n'est pas mon prof, c'est pour mon taf en faite.

J'avais pas vu qu'il y avait un cours dessus et merci pour le lien sur les didactitiel.

Sentinel · le 30 novembre 2007

Ah ok je n'ai rien dit alors :) (sauf pour l'orthographe :roll: )

Tu verras, w3schools.com est très bien pout tout ce qui est web.

lothar83fr · le 3 décembre 2007

s@lut a tous

bon j'ai presque fini ^^

sauf que ...

bha j'ai un problème ce que j'ajoute ne s'affiche pas dans la liste et j'arrive pas à trouver l'erreur.

Si quelqu'un voit l'erreur

<html>
<head>
<title>Filtrage incrémental d'une liste select par saisie</title>	 

<script language="JavaScript">

var Liste=new CreerListe("Produits", 5, 900);  
//Liste.Add("ALSACE CHASSELAS OU GUTEDEL");			 

<?php
		// connection a une base mysql en local 
		$connect = mysql_connect("localhost","root","") or die("Impossible de se connecter : " . mysql_error());

		// selection de la base de donnée mysql 
		mysql_select_db("automate", $connect);

		// la requête. 
		$result = mysql_query("SELECT libellé FROM produits WHERE (CIP LIKE '3%' OR CIP LIKE '7%') ORDER BY libellé ASC LIMIT 0 , 30;", $connect);		
		//$result = mysql_query("SELECT libellé FROM produits ORDER BY libellé ASC", $connect);		
		$SupListe ="";	
	 	while ($row = mysql_fetch_array($result)) {  	 
			$SupListe.=  "Liste.Add('" . $row['libellé'] . "');";		
		}  
		echo $SupListe;
?>	
function CreerListe(nom, hauteur, largeur) 
{
	this.nom=nom; 
	this.Lien=null;			
	this.nb=0; 
	this.Add=AjouterItem;
	this.MAJ=MAJListe;
}

function AjouterItem(item) 
{
	this[this.nb++]=item			
}

function MAJListe() 
{
	var txt=Lien.elements["deb_"+this.nom].value;
	Lien.elements[this.nom].options.length=0; 
	for (var i=0; i<this.nb; i++) {
		if ( this[i].substring(0,txt.length).toUpperCase()==txt.toUpperCase() )
		{		  			
			var o=new Option(this[i], this[i]);
			Lien.elements[this.nom].options[Lien.elements[this.nom].options.length]=o;
		}
	}
	if (Lien.elements[this.nom].options.length==1) 
	{
		Lien.elements[this.nom].selectedIndex=0;
	}
}

</script>
<style type="text/css">
input,select{
color:navy;
font-family:skia,Arial,Helvetica,sans-serif;
font-size:11px;
background-color:#8FC29F;
width:220;
}
</style>
</HEAD>

<body style="color:navy;font-family:skia,Arial,Helvetica,sans-serif;font-size:10px;">
<center>
	<div style="font-weight:bold;font-size:150%">
		Liste déroulante avec filtrage par clavier<br>

	</div>
	<div style="width:35em;text-align:justify;margin:3em 0;">
	Ce script permet de réduire le contenu d'une liste en tapant le début du libellé.
	</div>
</center>
<div style="margin:30px auto;width:220px">
	<form name="monform">
		<input type=text name=deb_Produits onkeyup="Liste.MAJ()"><BR>

		<select name=Produits size=5 >
		</select>
		<script language=javascript>
			var Lien=document.forms["monform"];
			Liste.MAJ();
		</script>
	</form>
</div>
</body>
</html>

BreizFenrir · le 3 décembre 2007

Mets ta phase d'initialisation dans une fonction et appelle-là grâce à l'attribut onload de la balise <body>, et ça ne devrait pas poser de problème.

Sauf pour les gens qui désactivent le Javascript bien sûr. Si tu veux qu'ils puissent utiliser la liste sans disposer de la fonction de filtrage, il faut que les éléments soient présents dans le code HTML à la base (ce qui enlève la nécessiter de faire beaucoup de choses à l'initialisation, sans empêcher le filtrage de pouvoir être utilisé chez qui a le JS d'activé).

lothar83fr · le 4 décembre 2007

merci BreizFenrir pour ta reponsse mais celà ne résoud pas mon problème.

J'ai trouvé la cause. Déjà j'avai un problème je mettais que de simples cotes quand je faisait mon liste.Add.

Je penssais que c'était la même chose. Deuxième problème, dans ma base de données j'ai des chaines avec des guillemets...

problème résolue avec addslashes() qui rajoute des antislashes sur les caractères spéciaux.

merci a tous ^^

Connexion

recherche incrémentale

Messages recommandés

lothar83fr

Lien vers le commentaire

Partager sur d’autres sites

tsubasaleguedin

Lien vers le commentaire

Partager sur d’autres sites

lothar83fr

Lien vers le commentaire

Partager sur d’autres sites

lothar83fr

Lien vers le commentaire

Partager sur d’autres sites

BreizFenrir

Lien vers le commentaire

Partager sur d’autres sites

Sentinel

Lien vers le commentaire

Partager sur d’autres sites

lothar83fr

Lien vers le commentaire

Partager sur d’autres sites

Sentinel

Lien vers le commentaire

Partager sur d’autres sites

lothar83fr

Lien vers le commentaire

Partager sur d’autres sites

BreizFenrir

Lien vers le commentaire

Partager sur d’autres sites

lothar83fr

Lien vers le commentaire

Partager sur d’autres sites

Archivé

Naviguer

Activité