Deux formulaires avec Ajax.Autocompleter
Bonjour,
J'ai actuellement un formulaire de recherche qui grâce à Ajax.Autocompleter propose une autocompletion (liste de contributeurs de livres) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <form action="liste_essai_pagination.php" method="get"id="recherche">
<div>
<input class="inputRecherche"type="text" id="contributeurs" name="clesearch" value="<?php if(isset($_GET['clesearch'])) echo $_GET['clesearch']; ?>"/>
</div>
<div id="contributeurs_propositions" class="autocomplete"></div>
<div>
<input type="submit" name="ok" class="bt_ok "value="Ok !"
</div>
</form>
<script type="text/javascript">
init();
</script> |
Le fichier JavaScript :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| var init = function ()
{
// Instanciation de la classe Autocompleter, pour le champ de saisie "departement"
new Ajax.Autocompleter(
"contributeurs", // id du champ de formulaire
"contributeurs_propositions", // id de l'élément utilisé pour les propositions
"autocompleter-exemple-1-serveur.php", // URL du script côté serveur
{
paramName: 'clesearch', // Nom du paramètre reçu par le script serveur
method:'get',
minChars: 1 // Nombre de caractères minimum avant que des appels serveur ne soient effectués
});
}; // init |
Le script serveur :
Code:
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
33
34
35
36
37
| if(isset($_GET['clesearch'])) {
header('Content-type: text/html; charset=UTF-8');
// on inclut la connexion
mysql_connect('localhost', 'root', '');
mysql_select_db('db');
mysql_set_charset( 'utf8' );//ajouté pour gestion des accents
// on fait la requête
$sql = "SELECT nom_contributeur, prenom_contributeur
FROM contributeurs
WHERE nom_contributeur LIKE '".mysql_real_escape_string($_GET['clesearch'])."%'";
$req = mysql_query($sql);
$i = 0;
echo '<ul>';
// on boucle sur tous les éléments
while($autoCompletion = mysql_fetch_assoc($req)){
echo '
<li >'.$autoCompletion['nom_contributeur'].'<br/><span class="informal">'.$autoCompletion['prenom_contributeur'].'</span></li>'
;
// on s'arrête s’il y en a trop
if (++$i >= 10)
die('<li>...</li></ul>');
}
echo '</ul>';
die();
} |
Le système d'autocompletion fonctionne très bien. Mais j'éprouve des difficultés à "dupliquer" ce système en le rattachant à un 2nd formulaire (liste des titres de livres) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <form action="liste_essai_pagination.php" method="get"id="recherche">
<div>
<input class="inputRecherche"type="text" id="titres" name="clesearch_titre" value="<?php if(isset($_GET['clesearch_titre'])) echo $_GET['clesearch_titre']; ?>"/>
</div>
</div>
<div id="titres_propositions" class="autocomplete"></div>
<div>
<input type="submit" name="ok" class="bt_oktitre"value="go titre !"
</div>
</form>
<script type="text/javascript">
init();
</script> |
J'ai crée un second code JavaScript sur le modèle du premier ainsi qu'un second fichier script serveur (en les adaptant au 2nd formulaire). Je me retrouve donc avec 2 fichiers JavaScript dans mon Head. Mais je n'arrive pas à faire fonctionner le système d'autocompletion sur les 2 formulaires, seul le 1er fonctionne.
Savez-vous comment adapter mon code JavaScript pour gérer 2 formulaires en autocompletion ? Merci d'avance.
