[javascript/PHP] aide à la saisie
Résolu
redwire
Messages postés
254
Date d'inscription
Statut
Membre
Dernière intervention
-
Rannios -
Rannios -
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...
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...
A voir également:
- [javascript/PHP] aide à la saisie
- Saisie gestuelle iphone - Guide
- Saisie vocale whatsapp - Accueil - Messagerie instantanée
- Saisie vocale sms - Guide
- Gboard saisie vocale - Accueil - Applications & Logiciels
- Easy php - Télécharger - Divers Web & Internet
8 réponses
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 ...
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>
<?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
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
J'ai essayé ça aussi:
marche pas because " ou ' ?
<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 ' ?
Je n'ai pas de message d'erreur avec ça:
mais malheureusement, l'aide à la saisie ne fonctionne toujours pas... :-(
<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... :-(