[javascript/PHP] aide à la saisie

Résolu/Fermé
redwire Messages postés 254 Date d'inscription jeudi 16 décembre 2004 Statut Membre Dernière intervention 6 août 2008 - 24 sept. 2006 à 10:57
 Rannios - 4 juil. 2011 à 22:16
Bonjour,

je souhaite faire un formulaire avec un champ où il y aura de l'aide à la saisie comme celui là:
http://javatwist.imingo.net/saisieauto4.php

seulement mais pays à moi, ils proviennent d'une table de ma base de données, comment faire ça?

Merci...

8 réponses

_ArKhAoN_ Messages postés 17 Date d'inscription mardi 18 juillet 2006 Statut Membre Dernière intervention 18 octobre 2006 2
24 sept. 2006 à 17:56
Moi j'opterai plutot pour un code dans ce genre, change option par ce que tu veut en fonction de ta table. (j'ai récupéré le code source de la page pour modèle).

Et en supposant également que ton hébergeur supporte php (ce qui me parrait clair puisque tout se trouves dans mysql) mais bon des fois ...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>saisie automatique modérée ^_^</title> 

<link rel="StyleSheet" type="text/css" href="index.css" />

<style type="text/css">
ul {display:none;background-color:white;padding:0px;margin:0px;width:150px;list-style:none}
li {width:150px}
label {font-weight:bold;color:white}
</style> 

<script type="text/javascript"> 

var tab=new Array(
<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('ma_base');
$rep1 = mysql_query('SELECT option FROM ma_table');
while($rep = mysql_fetch_array($rep1))
{
echo '\'' . $rep['option'] . '\',';
}
echo "'_'";
?>
); 


function go(alpha){ 
var aff=document.getElementById('liste');
var affiche=aff.getElementsByTagName('li');


// à chaque caractère tapé, on vide la liste de résultats précédente
while(aff.lastChild)aff.removeChild(aff.lastChild);

// on supprime les accents pour comparaison
for(i=0;i != tab.length;i++){  
tab2=tab[i].replace(/[àâä]/gi,'a'); 
tab2=tab2.replace(/[éèêë]/gi,'e'); 
tab2=tab2.replace(/[ïî]/gi,'i'); 
tab2=tab2.replace(/[ôö]/gi,'o'); 
tab2=tab2.replace(/[ùüû]/gi,'u'); 
alpha=alpha.replace(/[àâä]/gi,'a'); 
alpha=alpha.replace(/[éèêë]/gi,'e'); 
alpha=alpha.replace(/[ïî]/gi,'i'); 
alpha=alpha.replace(/[ôö]/gi,'o'); 
alpha=alpha.replace(/[ùüû]/gi,'u'); 


// on supprime les majuscules et on cherche une correspondance
if(tab2.toLowerCase().indexOf(alpha.toLowerCase())==0){ 
if(alpha){
// pour chaque correspondance, on crée un nouvel item dans la liste
var el=document.createElement("li"); 
var tx=document.createTextNode(tab[i]); 
// en cliquant sur l'item, on donne sa valeur à la zone de texte et on efface la liste de sélection
el.onclick=function(){document.getElementById('t').value=this.firstChild.data;aff.style.display='none'};
el.appendChild(tx);
aff.appendChild(el)};};
};


var total=affiche.length;// nombre de résultats trouvés

if((total==0) || (total>=4)){// Si résultats = 0 ou > 3
// création d'un item vide (conformité xhtml: pas de liste vide)
var el=document.createElement("li"); 
var tx=document.createTextNode(" "); 
el.appendChild(tx);
aff.style.display='none';// liste invisible
aff.appendChild(el);}
// sinon, on affiche les correspondances trouvées.
else aff.style.display='block';


}

</script>
 
</head> 

<body> 
<div id="menu">

<div id="site1">
<a class="menusite1" title="Accueil de JavaTwist, le site des scripts" href="javatwist.imingo.net/index.php">JavaTwist</a>
</div>
<div id="site2">
<a class="menusite2" title="Les scripts pour jouer" href="javatwist.imingo.net/index.php?menu=ludiques">Ludiques</a> -
<a class="menusite2" title="Les scripts pour rire" href="javatwist.imingo.net/index.php?menu=comiques">Comiques</a> -
<a class="menusite2" title="Des scripts pour savoir faire..." href="javatwist.imingo.net/index.php?menu=pratiques">Pratiques</a>
</div>
<div id="site3">
<a class="menusite3" title="Un annuaire de liens en libre service..." href="javatwist.imingo.net/index.php?menu=liens2">Liens</a> -

<a class="menusite3" title="Le chat historique de JavaTwist" href="javatwist.imingo.net/zetchat.php">Zetchat</a> -
<a class="menusite3" title="Le forum de JavaTwist" href="javatwist.imingo.net/forum/">Twisty Forum</a> -
<a class="menusite3" title="Un nouveau chat révolutionnaire à découvrir" href="javatwist.imingo.net/twistnchat/">Twist'n'Chat</a> -
<a class="menusite3" title="Les commentaires sur le site... Accès libre!" href="javatwist.imingo.net/avis.php">No Comment</a>
</div>
<div style="margin-right:20px;text-align:right">
<a href="javatwist.imingo.net/forum/sujets.php?ind=91" title="Les dernières créations locales" class="new">Nouveautés</a>
</div>
</div>

<hr />
<hr />

<div class="topo" style="margin:50px">
Une aide à la saisie qui reproduit le fameux attribut IE pour zones de texte <span>"autocomplete"</span>.<br />
Les données à rechercher (ici, tableau javascript, mais a priori, elle sont plutôt générées par un langage serveur avant) sont
les nombres de 1 à 20, écrits en toutes lettres.<br />
Si au maximum 3 résultats correspondent à la saisie, ils apparaissent sous la zone.<br />
Un clic sur une des options proposées copie la valeur dans le champ texte et efface la liste.
</div>


<form id="f" action=""> 

<div style="text-align:left;margin:100px">
<input class="texte" type="text" style="width:150px" id="t" onkeyup="go(this.value)" /> 
<label for="t">Saisissez votre requête</label>
<ul id="liste" style="display:none">
<li> </li> 
</ul> 
</div>
</form> 

<p style="margin-top:50px;color:white;clear:left">
<a class="liensite" href="javatwist.imingo.net">© Javatwist </a> - JavaTwisting people
</p>
</body> 
</html>

1
<?php
if ($rep_chanson = mysql_fetch_array($chanson))
	echo " '$rep_chanson['titre']' " ;
while($rep_chanson = mysql_fetch_array($chanson)) 
	echo ", '$rep_chanson['titre']' ";
?>


J'ai séparé les guillemets pour que ça se voit mieux. Pas besoin d'échapper les guillemets simples si ils sont dans une chaîne délimitée par des doubles :
"je m'appelle Rannios" fonctionne, ou alors 'je m\'appelle Rannios'...

Quand à la virgule, je propose un compteur :
<?php
$compteur = 0;
while($rep_chanson = mysql_fetch_array($chanson))
{
    if($compteur != 0)   { echo ", ";  }
    echo " '$rep_chanson['titre']' ";
    $compteur ++;
}
?>

(cela pourrait peut-être fonctionner avec un for au lieu du while)

Bonne soirée,
Rannios
1
redwire Messages postés 254 Date d'inscription jeudi 16 décembre 2004 Statut Membre Dernière intervention 6 août 2008 91
24 sept. 2006 à 20:59
pourquoi, après la boucle du while qui finit la création du tableau, tu finis par un echo "'_'"; ?
0
_ArKhAoN_ Messages postés 17 Date d'inscription mardi 18 juillet 2006 Statut Membre Dernière intervention 18 octobre 2006 2
25 sept. 2006 à 16:40
je l'attendais cette question :p ,

en fait ça c'était la solution la plus rapide pour moi pour ne pas à avoir faire de conditions si la boucle arrivait à la fin, on ne mets pas de virgule..

D'ailleurs est ce que quelqu'un pourrait dire comment on peut tester la dernière entrée?

merci
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
redwire Messages postés 254 Date d'inscription jeudi 16 décembre 2004 Statut Membre Dernière intervention 6 août 2008 91
25 sept. 2006 à 18:05
J'ai essayé ça aussi:

<script type="text/javascript"> 
<?php
echo "var tab=new Array(\n" ;
if ($rep_chanson = mysql_fetch_array($chanson))
	echo "\'$rep_chanson['titre']\'" ;
while($rep_chanson = mysql_fetch_array($chanson)) 
	echo ",\n\'$rep_chanson['titre']\'" ;
echo "\n);" ;
}
?>

etc...



marche pas because " ou ' ?
0
redwire Messages postés 254 Date d'inscription jeudi 16 décembre 2004 Statut Membre Dernière intervention 6 août 2008 91
26 sept. 2006 à 21:05
Je n'ai pas de message d'erreur avec ça:

<script type="text/javascript">
<?php
echo "var tab=new Array(\n" ;
if ($rep_chanson = mysql_fetch_array($chanson) )
	{echo "'"; echo $rep_chanson['titre']; echo "'" ; }
while($rep_chanson = mysql_fetch_array($chanson)) 
	{echo ",'"; echo $rep_chanson['titre']; echo "'" ; }
echo ",);" ;

?>


mais malheureusement, l'aide à la saisie ne fonctionne toujours pas... :-(
0
redwire Messages postés 254 Date d'inscription jeudi 16 décembre 2004 Statut Membre Dernière intervention 6 août 2008 91
26 sept. 2006 à 22:08
erreur, ça marche, j'avais juste une occurence où il y avaut une apostrophe qui mettait le bazar... utiliser addslashes...

par contre, ça me plait pas trop d'avoir 2 mysql_fetch_array sur la même requête...
0
j'vois pas où ça cloche, où est ton ' qui fout le bazar ?...

merci d'avance :)
0