2 formulaires avec Ajax.Autocompleter [Résolu]

[almoha]

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.

[gwyohm]

Bonsoir,

A quoi ressemble ton deuxieme fichier javascript ? Définit-il lui aussi une fonction init ?
Si oui, seule l'une des deux fonctions sera prise en compte. Peut être tu peux changer de principe :
Soit une seule fonction init qui initialise les 2 autocompleter (donc un seul fichier javascript), soit toujours en gardant tes 2 fichiers javascript, ne pas passer du tout par une fonction init, mais jouer sur l'événement load du body :
Dans chaque fichier js tu aurais :

Code :

1
2
3
4
5
6
 
Event.observe(document, "dom:loaded", function() {
  if($("id_formulaire")) {
    new Ajax.Autocompleter(...
  }
});

Au passage, dans tes extraits de code, tes formulaires ont le même id, ce qui est une erreur

@+

[almoha]

Bonjour,

Merci pour ta réponse. Effectivement mon 2eme fichier JavaScript définissait une fonction init. Ne sachant pas comment définir une seule fonction initialisant les 2 autocompleter, j'ai utilisé ton code dans chaque fichier. Cela fonctionne, merci beaucoup

[cojeulois62]

Bonjour,

J'ai sensiblement le meme problème, je veux mettre sur une page de recherche 2 zone avec autoCompletion.
Le problème est que je peux en faire fonctionner une seule (en fait, la requete sql est différente pour les 2...)

Voici ma fonction init dans le fichier .js:

Code :

1
2
3
4
5
6
7
8
9
 
		function autoCompletion_init(border_no_foc,border_foc,background_color_no_foc,background_color_foc,file_ref)
		{
			this.border_no_foc = border_no_foc;
			this.border_foc = border_foc;
			this.background_color_no_foc = background_color_no_foc;
			this.background_color_foc = background_color_foc;
			this.file_ref = file_ref;
		}

Je veux 2 formulaires de ce type, avec chacun leur propre requete sql:

Code :

1
2
3
4
5
6
7
 
		<form action="#" name="autoCompletion" onSubmit="return false;">
			<div id="autoCompletion_input">
				<input id="list0" type=text size=50 name="autoCompletion_input" onMouseOver="give_focus_style(0,1);" onBlur="focus_off();" onFocus="focus_on();" onKeyUp="event_capture(this.value,event);">
			</div>
			<div id="autoCompletion_answer" onClick="focus_on();"></div>
		</form>

J'avais dupliqué chaque fichier, dont celui contenant la requete sql en la changeant, maheureusement ca ne fonctionnait que pour une seule autoCompletion.
D'après vos messages précédents, il faut modifier les fonctions init(), mais je n'ai pas très bien compris.
Avez-vous assez de détails pour m'expliquer?

Merci d'avance,