Discussion :

[almoha]

Bonjour,

Grâce à un code JavaScript (framework Prototype), j'ai associé à un formulaire de recherche un système de saisie prédictive (autocomplétion). Voici mon formulaire :

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
<form action="liste.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="radio" class="bl_radio" name="search" value="scontrib"  checked="checked"  /> 
	<label for="contributeur" class="bl_radio_label">contributeur</label>
	<input type="radio" class="br_radio" name="search" value="stitre" <?php if (isset($_GET['search']) && $_GET['search'] == "stitre" ) {echo 'checked="checked"';} ?>  /> 
	<label for="titre" class="br_radio_label">titre</label>
 
	<input type="image" class="bt_ok " src="styles/img/btn2_ok.png" />
 
    </div>
 
 
            </form>
 
    <script type="text/javascript">
        init();
 
    </script>

Le système de completion fait appel au script serveur suivant :

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
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();
	}

D'après ce code, l'affichage prédictif ne se met en place que si la variable $_GET['clesearch'] existe. Cela fonctionne. Mais je voudrais ajouter une condition à cet affichage : ne déclencher l'autocompletion que si le bouton radio (name "search") ayant la value "scontrib" a comme attribut "checked". Ce qui supposerait, à contrario, le non déclenchement de l'autocompletion si le bouton radio a la value "stitre" et l'attribut "checked".
Voyez-vous comment arriver au résultat escompté ? Merci.

[osuwariboy]

ça ne serait pas simplement de faire:

Code :

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

1
2
3
 
if(isset($_GET['clesearch']) && $_GET['search'] == 'scontrib') {
.....

[almoha]

Merci pour ta réponse mais cela ne marche pas... C'est peut-être dû au code JavaScript qui fait référence au script serveur :

Code :

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

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(
        "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

Une idée pour résoudre mon problème ?

[osuwariboy]

Ah, je comprends... pourquoi, dans ce cas, ne pas utiliser 2 zones de textes qui s'échangeraient de place quand le bouton radio prend une certaine valeur? Dans l'entête, tu définis une fonction comme celle-ci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function onRadioClick(valeur)
{
     if(valeur == "scontrib"){
     document.getElementById("departement").style.display = "";
     document.getElementById("departement2").style.display = "none";
     }
     else
     {
         document.getElementById("departement").style.display = "none";
         document.getElementById("departement2").style.display = "";
     }
}

Maintenant, dans le body, tu définis les deux zones côte à côte en ayant soin d'en cacher une évidemment... et de s'assurer qu'elle n'a pas d'auto-complétion d'activé sur elle:

Code :

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

1
2
3
 
<input class="inputRecherche" type="text" id="departement" name="clesearch" value="<?php if(isset($_GET['clesearch'])) echo $_GET['clesearch']; ?>"/>
<input style="display:none" type="text" id="departement2" name="clesearch2" value="<?php if(isset($_GET['clesearch'])) echo $_GET['clesearch']; ?>"/>

Finalement, sur tes boutons radio, tu ajoutes l'appel à la fonction définie plus haut:

Code :

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

1
2
3
4
 
<input type="radio" class="bl_radio" name="search" value="scontrib"  checked="checked"  onclick="onRadioClick('scontrib')" /> 
	<label for="contributeur" class="bl_radio_label">contributeur</label>
	<input type="radio" class="br_radio" name="search" value="stitre" <?php if (isset($_GET['search']) && $_GET['search'] == "stitre" ) {echo 'checked="checked"';} ?>  onclick="onRadioClick('stitre')" />

Essentiellement, quand le bouton radio prend la valeur désirée, tu affiches la zone de texte avec l'auto-complétion... et quand il change de valeur, tu affiches celle qui n'en n'a pas. Je crois que ça peut résoudre ton problème.

Donne m'en des nouvelles .

[almoha]

Merci beaucoup pour cette aide . Mais je vais poster un message sur le forum JavaScript car j'opte finalement pour une nouvelle approche (2 formulaires en autococompletion).