Autocompletion (Ajax.autocompleter) : besoin d'aide

**mymy2002** · 22/01/2010, 10h39

Tout est dans le titre! J'utilise le navigateur Firefox. J'aimerais réaliser une autocompletion sur un champ text, les suggestions étant situées sur un webservice.
Voici ce que j'ai deja fait (qui ne fonctionnent pas!

)
Popup.tpl :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<link rel="stylesheet" type="text/css" href="{$THEME_PATH}style.css">
<script language="JavaScript" type="text/javascript" src="include/js/general.js"></script>
<script language="JavaScript" type="text/javascript" src="include/js/{php} echo $_SESSION['authenticated_user_language'];{/php}.lang.js?{php} echo $_SESSION['vtiger_version'];{/php}"></script>
<script language="JavaScript" type="text/javascript" src="modules/{$MODULE}/{$MODULE}.js"></script>
<script language="javascript" type="text/javascript" src="include/js/js/prototype.js"></script>
<script type='text/javascript' src='include/js/js/scriptaculous.js'></script>
 
 
<body class="small" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bottommargin=0 rightmargin=0>
 
		<form action="index.php" onsubmit="return false;" method='post' name='ref_form' id='ref_form'>
 
	       Reference du produit :
         <input type='text' name='ref' id='ref'  value='{php} echo $_POST["ref"];{/php}'/>
         <div class='autocomplete' id='autocomplete'></div>
         <input type='submit' value='Valider' class="crmbutton small create"/>
    </form>
 
	 <script>
	   new Ajax.Autocompleter ('ref','autocomplete','autocompletion.php',
            {ldelim}
               paramName: 'ref'
            {rdelim});
   </script>
 
</body>
</html>

autocompletion.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<ul class="references">
    <?php try {
 
        $client = new SoapClient('http://www.webservice_magento.fr:80/env.wsdl', array('trace' => 1, 'soap_version'  => SOAP_1_1));
 
        $O=$client->getDebRef($_POST["reef"]);
 
 
        if($O->ref1!="")echo"<li class=\"reference\">".$O->ref1."<br><span class=\"informal\">$O->nom1</span> </li>";
        if($O->ref2!="")echo"<li class=\"reference\">".$O->ref2." <br><span class=\"informal\">$O->nom2</span> </li>";
        if($O->ref3!="")echo"<li class=\"reference\">".$O->ref3." <br><span class=\"informal\">$O->nom3</span> </li>";
        if($O->ref4!="")echo"<li class=\"reference\">".$O->ref4." <br><span class=\"informal\">$O->nom4</span> </li>";
        if($O->ref5!="")echo"<li class=\"reference\">".$O->ref5." <br><span class=\"informal\">$O->nom5</span> </li>";
        if($O->ref6!="")echo"<li class=\"reference\">".$O->ref6." <br><span class=\"informal\">$O->nom6</span> </li>";
        if($O->ref7!="")echo"<li class=\"reference\">".$O->ref7." <br><span class=\"informal\">$O->nom7</span> </li>";
        if($O->ref8!="")echo"<li class=\"reference\">".$O->ref8." <br><span class=\"informal\">$O->nom8</span> </li>";
        if($O->ref9!="")echo"<li class=\"reference\">".$O->ref9." <br><span class=\"informal\">$O->nom9</span> </li>";
        if($O->ref10!="")echo"<li class=\"reference\">".$O->ref10." <br><span class=\"informal\">$O->nom10</span> </li>";
 
 
 
    } catch (SoapFault $fault) {
        echo $fault;
    }
 
/*
Exemple de ligne avec un onclick
 
if($O->ref1!="")echo"<li class=\"reference\" onclick='document.ref_form.ref.value=\"".$O->ref1."\";document.ref_form.submit();'>".$O->ref1."<br><span class=\"informal\">$O->nom1</span> </li>";*/
    ?>
 
 
</ul>

Donc voilà, si vous pouviez m'aider svp ....

**gwyohm** · 22/01/2010, 12h00

Bonjour,

la syntaxe à utiliser est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Ajax.Autocompleter(id_of_text_field, id_of_div_to_populate, url, options);

tu fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script>
	   new Ajax.Autocompleter ('ref','autocomplete','autocompletion.php',
            {ldelim}
               paramName: 'ref'
            {rdelim});
   </script>

je ne sais pas ce que tu souhaites faire avec {ldelim} et {rdelim}, mais c'est invalide en javascript comme syntaxe...

**mymy2002** · 22/01/2010, 14h02

Je suis obliger de mettre {ldelim}....{rdelim}, c'est les balises ouvrantes et fermantes qui remplacent { et } dans Smarty

**gwyohm** · 22/01/2010, 15h49

on peut voir le code HTML généré ?
Peux tu préciser un peu ce qui ne fonctionne pas (erreur javascript ? et quelle erreur ; la requete ajax se fait-elle ?...)

**mymy2002** · 22/01/2010, 15h52

Je n'ai pas d'erreur qui s'affiche, je ne sais même pas si la requête Ajax s'exécute.

Code source de la page générée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
38
39
40
41
42
43
44
45
46
47
48
49
50
<link rel="stylesheet" type="text/css" href="themes/bluelagoon/style.css">
<script language="JavaScript" type="text/javascript" src="include/js/general.js"></script>
<script language="JavaScript" type="text/javascript" src="include/js/fr_fr.lang.js?5.0.3"></script>
<script language="JavaScript" type="text/javascript" src="modules/Products/Products.js"></script>
<script language="javascript" type="text/javascript" src="include/js/js/prototype.js"></script>
<script type='text/javascript' src='include/js/js/scriptaculous.js'></script>
 
<body class="small" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bottommargin=0 rightmargin=0>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mailClient mailClientBg">
	<tr>
	<td>
 
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr>
					<td class="moduleName" width="80%" style="padding-left:10px;">Produits</td>
					<td  width=30% nowrap class="componentName" align=right>.tiger</td>
			</tr>
		</table>
		<table width="100%" cellpadding="5" cellspacing="0" border="0"  class="homePageMatrixHdr">
			<tr>
 
			<td style="padding:10px;" >		
			<form action="" method='post' name='ref_form' id='ref_form'><input type="hidden" name="PHPSESSID" value="7d34c6fadb8104feb8b68393beda6c5c" />
				<table width="100%" cellpadding="5" cellspacing="0">
				<tr>
					<td width="20%" class="dvtCellLabel"><img src="themes/bluelagoon/images/basicSearchLens.gif"></td>
					<td width="30%" class="dvtCellLabel">
			Reference du produit :
                    	<input type='text' name='ref' id='ref'  value=''/>
		   	<div class='autocomplete' id='autocomplete'></div></td>
                        <td width="20%" class="dvtCellLabel"><input type='submit' name='valider' value='Valider' class="crmbutton small create"/></td>
 
				</tr>
                                </table>
		        </form>
                        </td>
			</tr>
		</table>
       </td>
       </tr>
 
 
</table>
		<script type="text/javascript">
	  		new Ajax.Autocompleter ("ref","autocomplete","autocompletion.php",
            		{
               			paramName: 'ref',
	       			method: 'post'
            		});
		</script>