11548 sujets

JavaScript, DOM et API Web HTML5

2 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) :

<form action="liste_essai_pagination.php" method="get"id="recherche">
        <div>
        
            <input class="inputRecherche"type="text" id="departement" name="clesearch" value="<?php if(isset($_GET['clesearch'])) echo $_GET['clesearch']; ?>"/>
        </div>
        <div id="departement_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 :



var init = function ()
{
    // Instanciation de la classe Autocompleter, pour le champ de saisie "departement"
    new Ajax.Autocompleter(
        "departement",   // id du champ de formulaire
        "departement_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 :

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. Je voudrais maintenant ajouter un second formulaire (recherche titres de mes livres) avec aussi le système d'autocompletion.
Comment modifier mon fichier JavaScript pour me permette de gérer 2 formulaires de recherche indépendamment ? Merci de votre éclairage sur le sujet.
Modifié par almoha (20 Nov 2010 - 13:27)

var init = function () 
{ 
    // Instanciation de la classe Autocompleter, pour le champ de saisie "departement" 
    new Ajax.Autocompleter( 
        "departement",   // id du champ de formulaire 
        "departement_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 
             
        }); 

// Instanciation de la classe Autocompleter, pour le champ de saisie "departement" 
    new Ajax.Autocompleter( 
        "autre-chose",   // id du champ de formulaire 
        "autre-chose",  // id de l'élément utilisé pour les propositions 
        "autre-chose.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


Ca ne suffit pas comme ça ?
Sujet clos
Aller à