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>
Appel variable php javascript
