11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai le système d'autocomplétion AJAX-scriptaculous suivant (liste comportant des titres de livre et des contributeurs):

Le formulaire :


<div id="recherche"><!--// DEBUT #recherche1 -->
	
	<form action="traitement.php" method="get"id="">

	<input type="hidden" name="id" value=""/>
	<input type="hidden" name="type_search" value=""/>
	
	<label for="nom">RECHERCHER</label>
	
        <input  type="text" class="search-input" id="departement" name="clesearch" />
       
	<div id="departement_propositions"  class="autocomplete"></div>
        
	<input class="btn_search" type="submit" name="Submit" value="">
		
       
    </form>
    
    <script type="text/javascript">
        init();
		
    </script>
	
</div><!--//FIN #recherche1 -->


L'appel de la fonction autocompleter :


Event.observe(document, "dom:loaded", function() {
  if($("recherche")) { //id du <div> global
    new Ajax.Autocompleter("departement",   // id du champ de formulaire
        "departement_propositions",  // id de l'élément utilisé pour les propositions
        "autocompletion.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
			
        });
  }
});


Le script serveur qui remplit le div avec les proposition de l'autocomplétion :


<?php


if(isset($_GET['clesearch'])) {


		header('Content-type: text/html; charset=UTF-8');
		mysql_connect('localhost', 'root', '');
		mysql_select_db('bdd');
		mysql_set_charset( 'utf8' );//ajouté pour gestion des accents
		
	
		// requête
		$sql = "SELECT titre AS res, id_livre AS id, type_s AS type_search
  FROM livre
 WHERE titre LIKE '%".mysql_real_escape_string($_GET['clesearch'])."%'
 union ALL
SELECT concat(nom_contributeur,', ',prenom_contributeur) AS res, id_contributeur AS id, type_s AS type_search
  FROM contributeurs
 WHERE nom_contributeur LIKE '%".mysql_real_escape_string($_GET['clesearch'])."%'OR prenom_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['res'].'
			<span class="informal"style="display:none>'.$autoCompletion['id'].'</span>
			<span class="informal"style="display:none>'.$autoCompletion['type_search'].'</span>'
			</li>';/*class informal = éléments affichés dans les propositions
mais non pris en compte par le script serveur*/
		
			if (++$i >= 10){
				die('<li>...</li></ul>');}
				
		}
		echo '</ul>';
		die();
	}


L'autocompletion fonctionne. Le champ "res" correspond au titre d'un livre ou au contributeur d'un livre (item qui s'affiche dans la liste des propositions). Le champ " id "correspond à l'id du titre ou du contributeur. Le champ "type_search" correspond au type de recherche déclenchée une fois que l'utilisateur à cliqué sur l'une des propositions et soumis le formulaire.
Ces 2 champs me sont utiles en php pour construire la requête déclenchée une fois le formulaire soumis. Je souhaiterais récupérer la valeur de ces 2 champs et la rapatrier dans les 2 "input hidden" de mon formulaire :

<input type="hidden" name="id" value=""/>
<input type="hidden" name="type_search" value=""/>

En regardant la doc de scriptaculous, j'ai vu que l'option parameters pouvait correspondre à ma problématique : "A text string containing extra query parameters to be passed to the server-side resource".
Ou peut-être faut-il passer par l'option afterUpdateElement faisant appel à une fonction getSelectionId. Mais je suis vraiment débutant : je ne sais pas du tout comment m'y prendre pour arriver au résultat souhaité...Pouvez-vous m'aider ? Merci.
Modifié par almoha (03 Jul 2011 - 08:38)