envoi du formulaire lors du click [Résolu]

fazpedro · 27/09/2011, 14h37

Bonjour,
j'ai un formulaire en Ajax qui fonctionne bien mais je voudrais l'améliorer :
si l'utilisateur "clique" sur la phrase trouvée, je souhaite que l'action "submit" se fasse directement sans être obligé de cliquer sur le bouton "Envoyer", bref avoir le même genre que la recherche dans Google par exemple...
Merci.

agenda.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
34
35
36
37
38
39
40
41
42
43
44
<?php session_start();
$nompage = "agenda.php";
require("configuration.php");
$sql = connect_sql();
$sql2 = detection_mobile();
$sql3 = bandeau_detection();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<title><?php echo $nom_site ?></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
	function lookup(inputString) {	if(inputString.length == 0) { // si le champs txte est vide
			$('#suggestions').hide(); // on cache les suggestions
		} else { // sinon
			$.post("ajax_ev.php", {queryString: ""+inputString+""}, function(data){ 
			// on envoie la valeur du champ texte dans la variable post queryString au fichier ajax_ev.php
				if(data.length >0) {
					$('#suggestions').show(); // si il y a un retour, on affiche la liste
					$('#autoSuggestionsList').html(data); // et on remplit la liste des données
					} }); 		}	}
	function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200); }
	$(document).ready( function () {
		$("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
			lookup($(this).val()) 		});
		$("input#inputString").blur( function() { // si le champ texte perd le focus
			fill() 		});	});
</script>
</head>
<body>
<?php include($bandeau); ?> <!-- insère le bandeau principal en haut en fonction de la connexion -->
<div id="mainContent">
<br />	<?php include('moteur_de_recherche.php'); ?> <!-- insère le moteur de recherche par artiste  -->
</div>
<?php mysql_close($sql); //On se deconnecte ?>
<?php include('bas_de_page.php'); ?> <!-- insère le bas de page  -->
</body>
</html>

moteur_de_recherche.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
<form method="post" action="recherche_interne.php">
<fieldset>
<br />
<legend> &nbsp; Recherche par artiste &nbsp; </legend>
<br /><br />
<label>Nom : </label>
<br />
<input type="text" tabindex ="1" name="recherche" class="ev" value="" id="inputString" onfocus="this.className='ev_focus';" onblur="this.className='ev';
valide(this, 'err_mdp');" class="ev" /><!--  champ texte à analyser pour les suggestions -->
<br />
 <div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
<div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions -->
</div>
</div>
<br /><br />
<input type="submit" tabindex ="2" value="Rechercher" />
</fieldset>
</form>

ajax_ev.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
34
35
36
37
38
39
40
<?php
require("configuration.php");
$sql = connect_sql();
mysql_query("SET NAMES utf8");
// si une variable queryString a été posté
if(isset($_POST['queryString'])) 
{
// si la longueur du contenu de la variable est superieur à 0
	$queryString = ($_POST['queryString']);				// recupere la valeur saisie avant
	if(strlen($queryString) >0)
		{
			$chaine_post_recupere	= stripslashes($_POST['queryString']);				// recupere la valeur saisie
			$chaine_pour_requete_ajax 	= mysql_real_escape_string($chaine_post_recupere);	// valeur avec protection contre injections sql
			$chaine_pour_requete 	= stripslashes($chaine_pour_requete_ajax);				// valeur a afficher sans les slashes & cie...
 
			// requete sql à personnaliser pour correspondre à votre base de données
			$result = mysql_query("SELECT * FROM evenement WHERE nom LIKE '%$chaine_pour_requete%' LIMIT 15");
			if($result) 
			{	// on parcourt les resultats
				while($nom = mysql_fetch_array($result)) 
					{
						// on affiche les resultats dans un element de liste en ajoutant la fonction fill sur l'evenenement onClick
						echo '<li onClick="fill(\''.$nom["nom"].'\');">'.stripslashes($nom["nom"]).'</li>';
					}
			} 
			else 	
				{
					echo '';
				}
		}
		else
			{
				echo '';
			}
}
else
	{
		echo 'Il ne devrait pas avoir un accès direct à ce script !!!';
	}
?>

jreaux62 · 27/09/2011, 17h14

Bonjour,
il suffit de mettre (là où tu veux) :

Code :

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

onclick="javascript: submit();"

fazpedro · 27/09/2011, 18h12

j'ai essayé de mettre à plusieurs endroits mais rien ne se passe

,
où dois-je le mettre exactement ?
Merci...

christele_r · 28/09/2011, 08h18

Bonjour,
En fait tu veux que AJAX soit déclenché a chaque mouvement sur un input

Et tu site "comme google" , cela s'appelle de l'autocomplementation,
Par exemple si tu as des noms de pays dans un des input tu écrirais
ajax.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<?php
session_start();
header('Content-type: text/html; charset=ISO-8859-1');
?>
<script type="text/javascript">
<!--
function Capter(lui)
{
document.LeForm.pays.value=lui;
}
function maFonctionAjax(pays)
{
  if(pays.length != 0)
  {
   var MonAjax;
   if (window.XMLHttpRequest){ MonAjax = new XMLHttpRequest();}
    else if (window.ActiveXObject) {MonAjax = new ActiveXObject('Microsoft.XMLHTTP');}
     else
     {
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
      MonAjax = false;
     }
   MonAjax.open('POST',"ajax_sql.php",true);
   MonAjax.onreadystatechange = function()
    {
     if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
       if (document.getElementById) 
        {    
         if (MonAjax.responseText !='')
          {
           document.getElementById('LaReponse').innerHTML="<ul>"+MonAjax.responseText+"</ul>";
          }
           else { document.getElementById('LaReponse').innerHTML=''; }
        }     
      }
    }
   MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   MonAjax.send('pays='+pays);
  } 
}
//-->
</script>
 
<br /><br /><br />
<form method='post'  action='#' id='LeForm' name='LeForm'>
Le Pays:  <input name='pays' id='pays' type='text' autocomplete='off'  onkeyup='maFonctionAjax(this.value);return false;' value=''  ><br />
<input type='submit' value='envoyer'  /><br />
</form>
<br /><br /><div class='LaReponse' id='LaReponse'> </div><br /><br />
</body></html>

Et le php appelé lui va lire mysql et repondre
ajax_sql.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
 
<?php
header('Content-type: text/html; charset=ISO-8859-1');
$pays = (isset($_POST['pays'])) ? $_POST['pays'] : '';
if(strlen($pays) >0)
  {
  $LeBuf="";
  $Flag1=mysql_connect("localhost","root","");
 $Flag2=mysql_select_db("tabase"); 
  $result=mysql_query( "select nom from ajax_pays WHERE nom  LIKE '$pays%' LIMIT 10");
 while ($row=mysql_fetch_array($result)) 
  {
    $rowx=$row['nom'];
    $LeBuf .="<li  onClick=\"Capter('".$rowx."');\">".$rowx."</li>";
  }
  echo $LeBuf;
  }
?>

fazpedro · 28/09/2011, 11h49

@ christele_r :
j'ai essayé ton code mais cela fait la même chose...

mon autocomplétation fonctionne déjà mais je voudrais qu'en cliquant sur l'un des résultats dans les suggestions, j'obtienne directement la liste des résultats "comme Google" sans avoir à cliquer sur le bouton...

christele_r · 28/09/2011, 12h10

J'espéres que tu as gardé
$LeBuf .="<li onClick=\"Capter('".$rowx."');\">".$rowx."</li>";

et bien sur dans le AJAX

Code :

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

1
2
3
4
5
 
function Capter(lui)
{
document.LeForm.pays.value=lui;
}

Ce qui fait exactement ce que tu souhaites !

fazpedro · 28/09/2011, 13h18

Voici les codes que j'ai testé mais qui ne font pas ce que je souhaite, car
les données trouvées s'affichent bien en-dessous mais je ne peux pas sélectionner l'un des éléments...

ajax.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?php session_start();
header('Content-type: text/html; charset=ISO-8859-1');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<title>ESSAI</title>
<script type="text/javascript">
function Capter(lui)
{
document.LeForm.pays.value=lui;
}
function maFonctionAjax(pays)
{
  if(pays.length != 0)
  {
   var MonAjax;
   if (window.XMLHttpRequest){ MonAjax = new XMLHttpRequest();}
    else if (window.ActiveXObject) {MonAjax = new ActiveXObject('Microsoft.XMLHTTP');}
     else
     {
      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
      MonAjax = false;
     }
   MonAjax.open('POST',"ajax_sql.php",true);
   MonAjax.onreadystatechange = function()
    {
     if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
       if (document.getElementById) 
        {    
         if (MonAjax.responseText !='')
          {
           document.getElementById('LaReponse').innerHTML="<ul>"+MonAjax.responseText+"</ul>";
          }
           else { document.getElementById('LaReponse').innerHTML=''; }
        }     
      }
    }
   MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   MonAjax.send('pays='+pays);
  } 
}
</script>
</head>
<body>
 <br /><br /><br />
<form method='post'  action='#' id='LeForm' name='LeForm'>
Le Pays:  
<input name='pays' id='pays' type='text' autocomplete='on'  onkeyup='maFonctionAjax(this.value);return false;' value=''  >
<br />
<input type='submit' value='envoyer'  />
<br />
</form>
<br />
<br />
<div class='LaReponse' id='LaReponse'>
</div>
<br /><br />
</body>
</html>

ajax_sql.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
<?php
require("configuration.php");
$sql = connect_sql();
mysql_query("SET NAMES utf8");
header('Content-type: text/html; charset=ISO-8859-1');
$pays = (isset($_POST['pays'])) ? $_POST['pays'] : '';
if(strlen($pays) >0)
  {
	$LeBuf="";
	$Flag1=mysql_connect("localhost","root","");
	$Flag2=mysql_select_db("tabase");
	$result = mysql_query("SELECT * FROM evenement WHERE nom LIKE '%$pays%' LIMIT 15");
	while ($row=mysql_fetch_array($result)) 
	{
		$rowx=$row['nom'];
		$LeBuf .="<li  onClick=\"Capter('".$rowx."');\">".$rowx."</li>";
	}
 
	echo $LeBuf;
 
  }
?>

christele_r · 28/09/2011, 15h48

Tu sais je ne suis pas certaine de la compatibilitée 100%
Mais testes cela
http://www.lgms-fr.com/ajax.php
tapes f par exemple puis choisis et clic france ça devrait aller dans
la zone de saisie non ?

fazpedro · 28/09/2011, 16h18

oui christele_r cela va dans la zone de saisie mais hélas cela ne fait pas le "click" sur "envoyer" comme je le souhaite... pour avoir les résultats...

christele_r · 28/09/2011, 17h02

Il suffit de le mettre dans le java-script

Code :

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

1
2
3
4
5
6
function Capter(lui)
{
document.LeForm.pays.value=lui;
document.LeForm.submit();
 
}

fazpedro · 04/10/2011, 09h58

Cela fonctionne presque...
j'ai rajouté ceci dans "agenda.php" :

Code :

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

document.ajax_recherche.submit(); // permet de rechercher sans cliquer ...envoi du "submit"....!

quand je sélectionne le mot trouvé.. le "click" se fait bien et la recherche se fait bien tout seul mais... le "POST" ne me donne que la ou les lettres entrées et pas le mot entier :
Exemple :
je tapes "s", il me trouve "solitude", je clique, la recherche se fait bien sur "solitude" mais l'affichage n'est pas bon :
Voici les résultats pour :
s
événement
solitude
....

Merci.

moteur_de_recherche.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
<form method="post" name="ajax_recherche" id="ajax_recherche" action="recherche_interne.php">
<fieldset>
<br />
<legend> &nbsp; Recherche par artiste &nbsp; </legend>
<br /><br />
<label>Nom : </label>
<br />
<input type="text" tabindex ="1" autocomplete='on' name="recherche" class="ev" onkeyup='maFonctionAjax(this.value);return false;' value='' id="inputString" onfocus="this.className='ev_focus';" onblur="this.className='ev';
valide(this, 'err_mdp');" class="ev" /><!--  champ texte à analyser pour les suggestions -->
<br />
 <div class="suggestionsBox" id="suggestions" <!-- style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
<div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions -->
</div>
</div>
<br /><br />
<input type="submit" tabindex ="2" value="Rechercher" />
</fieldset>
</form>

recherche_interne.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<?php session_start();
require ("configuration.php"); //accès à la base de données
$sql = connect_sql();
$sql2 = detection_mobile();
$sql3 = bandeau_detection();
$pseudo_membre = $_SESSION['pseudo'];
$requete = mysql_query("SELECT * FROM pdf_membre WHERE `pseudo`='$pseudo_membre'"); 
$result = mysql_fetch_array ($requete);
$id = $result['id'];
$pseudo = $result['pseudo'];
$mail = $result['mail'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<title><?php echo $nom_site ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo $nom_style ?>" />
</head>
<body>
<?php include($bandeau); ?> <!-- insère le bandeau principal en haut en fonction de la connexion -->
<div id="mainContent">
<?php
// fonction pour supprimer les accents
function supprime_accents($chaine)
		{	
			$avec_accent 	= "ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÒÓÔÕÖŒØÙÚÛÜÝàáâãäåæçèéêëìíîïðòóôõöùúûüýÿÑñŠšœ";
			$sans_accent 	= "AAAAAAACEEEEIIIIOOOOOOOUUUUYaaaaaaaceeeeiiiioooooouuuuyynnsso";
			$chaine 	= strtr($chaine, $avec_accent, $sans_accent);
			return $chaine;
		}
// fonction pour nettoyer la chaine de caracteres
	function trimUltime($chaine)
	{
		$chaine = trim($chaine);
		$chaine = str_replace("\t", " ", $chaine);
		$chaine = eregi_replace("[ ]+", " ", $chaine);
		return $chaine;
	}
 
mysql_query("SET NAMES 'utf8'");
//On determine l'expression a rechercher
if(!empty($_POST['recherche'])) 
{
	$chaine_post_recup 				= stripcslashes($_POST['recherche']);				// recupere la valeur saisie
 	$chaine_protegee 				= mysql_real_escape_string($chaine_post_recup);		// valeur avec protection contre injections sql
	$chaine_sans_accent 			= supprime_accents($chaine_protegee);				// valeur dans accents
	$chaine_pour_recherche_avant 	= trimUltime($chaine_sans_accent);					// valeur nettoye sans espaces inutiles
	$chaine_pour_recherche		 	= stripcslashes($chaine_pour_recherche_avant);		// valeur nettoye sans espaces inutiles
	// $chaine_pour_affichage 			= htmlspecialchars($chaine_pour_recherche);			// valeur a afficher sans les slashes & cie...
	$chaine_pour_affichage 			= $chaine_post_recup;
 
	$chaine_pour_sql = str_replace("'" , " ",$chaine_pour_recherche);
 
	$mots = explode(' ',$chaine_pour_sql);	//sépare l'expression en mots cles
    foreach($mots as $mot)
    {
		$req2 = 'SELECT * FROM evenement WHERE nom LIKE "%'.$mot.'%" ';
	}
	$requete = mysql_query($req2) or die ('Erreur : '.mysql_error() );
	$total = mysql_num_rows($requete);
	//On vérifie que la table contient quelque chose
	if (mysql_num_rows($requete) == 0)
	{
		echo '<br />'; 
		echo '<p>'.'Aucun &eacute;v&eacute;nement pour :'.'<h2>'.'<strong>'.$chaine_pour_affichage.'</strong>'.'</h2>'.'</p>';
		echo '<br />'; 
		echo '<a href="javascript:window.history.go(-1)">'.'Retour'.'</a>'; // retour en page précédente
	}
	//Si il y a des entrées	  
	else
	{
		echo '<p />';
		echo '<br />'; 
		echo '<p>'.'Voici les r&eacute;sultats pour :'.'<h2>'.'<strong>'.$chaine_pour_affichage.'</strong>'.'</h2>'.'</p>';
 
		//On fait une boucle pour sortir toutes les entrées
		echo '<a href="javascript:window.history.go(-1)">'.'Retour'.'</a>'; // retour en page précédente
		echo '<br />'; 
		while($affiche = mysql_fetch_array($requete))
		{
			//On remet la date au format français
			setlocale (LC_TIME, 'fr_FR.UTF8');
			$date_affiche = $affiche["date_ev"];
			$date_vue = strftime("%A %d %B",strtotime("$date_affiche"));
			//On affiche les entrées
			echo '<p />';
			echo '<br />';
			echo '<b>'.stripslashes($affiche["type_evenement"])."   ".'</b>';
			echo '<br />';
			echo "     ".stripslashes($affiche["type_etab"])."   ";
			echo '<b>'."     ".$date_vue."   ".'</b>';
			echo "     ".stripslashes($affiche["secteur"])."   ";
			echo "Début à : ".stripslashes($affiche["heure"])."   ";
			echo "  Tarif : ".stripslashes($affiche["tarif"])."   ";
			echo " ".stripslashes($affiche["montant"])."   ";
			echo " où ? ".stripslashes($affiche["lieu"])."   ";echo '<br />';
			echo '<br />';
			echo '<div class="autre">';
			echo '<span style="color:#8E236B;">';
			echo '<strong>';
			echo stripslashes($affiche["nom"]);
			echo '</strong>';
			echo '</span>';
			echo '<br />';
			echo '<div class="cache">';
			echo '<strong>';
			echo stripslashes($affiche["description"]);
			echo '<br/>';
			echo  !empty($affiche["site_infos"]) ? '<a href="'.stripslashes($affiche["site_infos"]).'">Informations</a>' : ' ';
			echo '<br/>';
			echo " mis en ligne par  ".stripslashes($affiche["pseudo_ev"])."   ";
			echo '</strong>';
			echo '</div>';
			echo '</div>';
			echo '<br />';
		}	// fin du while
 
	}	// fin du ELSE
 
 }	// fin du if !empty $_POST'recherche'
 
 else	
	{
		$chaine_pour_affichage = "";
		echo '<br />'; 
		echo '<b>'.'Vous n\'avez rien saisi !'.'</b>';
		echo '<p>'.$chaine_pour_affichage.'</p>';
		echo '<a href="javascript:window.history.go(-1)">'.'Retour'.'</a>'; // retour en page précédente
	}	// fin du deuxième ELSE
 
// Fermeture de la connexion à la base de données
mysql_close($sql); //On se deconnecte
 
?>
</div> 
<?php include('bas_de_page.php'); ?> <!-- insère le bas de page  -->
</body>
</html>

agenda.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?php session_start();
$nompage = "agenda.php";
require("configuration.php");
$sql = connect_sql();
$sql2 = detection_mobile();
$sql3 = bandeau_detection();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />	
<title><?php echo $nom_site ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo $nom_style ?>" />
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
function lookup(inputString) 
{
	if(inputString.length == 0)
		{	// si le champs txte est vide
			$('#suggestions').hide(); // on cache les suggestions
		}
	else    // sinon
	{
		$.post("ajax_ev.php", {queryString: ""+inputString+""},
		function(data)
			{ // on envoit la valeur du champ texte dans la variable post queryString au fichier ajax
			if(data.length >0) 
				{
					$('#suggestions').show(); // si il y a un retour, on affiche la liste
					$('#autoSuggestionsList').html(data); // et on remplit la liste des données
				}
			});
	}
}
function fill(thisValue)
{ // remplir le champ texte si une suggestion est cliquée
	$('#inputString').val(thisValue);
	setTimeout("$('#suggestions').hide();", 200);
	$('#inputString').submit();
	document.ajax_recherche.submit(); // permet de rechercher sans cliquer ...envoi du "submit"....!
}
$(document).ready( function () { // lorsque la page est entierement chargee
	$("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
		lookup($(this).val())
		});
 
	$("input#inputString").blur( function() { // si le champs texte perd le focus
		fill()
		});
});
</script>
</head>
<body>
<?php include($bandeau); ?> <!-- insère le bandeau principal en haut en fonction de la connexion -->
<div id="mainContent">
<br />
<p>Retrouvez &eacute;galement les recherches par<br />
<a href="agenda_date.php">Date</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="agenda_type.php">Type</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="agenda_secteur.php">Secteur</a>&nbsp;&nbsp;&nbsp;&nbsp;
</p>
<?php include('moteur_de_recherche.php'); ?> <!-- insère le moteur de recherche par artiste  -->
</div>
<?php mysql_close($sql); //On se deconnecte ?>
<?php include('bas_de_page.php'); ?> <!-- insère le bas de page  -->
</body>
</html>

christele_r · 04/10/2011, 10h38

Submite ne sert a rien si le champ imput n'est pas rempli !
Utilise la logique que je t'ais indiquée, et surtout réfléchis un peut.

fazpedro · 04/10/2011, 15h31

Effectivement l'input n'était pas rempli...

Code :

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

1
2
3
4
$('#inputString').submit();
	// permet de rechercher sans cliquer ...envoi du "submit"....!	
	$("input#inputString").blur(thisValue);
	document.ajax_recherche.submit();

C'est bon ça fonctionne très bien avec blur..sauf que je trouve un peu lent le click... mais bon...

27/09/2011, 17h14	#2
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 994 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 994 Points : 5 787 Points : 5 787	Bonjour, il suffit de mettre (là où tu veux) : Code : Sélectionner tout - Visualiser dans une fenêtre à part onclick="javascript: submit();" __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

27/09/2011, 18h12	#3
fazpedro Membre du Club Inscription : août 2009 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2009 Messages : 360 Points : 64 Points : 64	j'ai essayé de mettre à plusieurs endroits mais rien ne se passe , où dois-je le mettre exactement ? Merci...
	00

28/09/2011, 11h49	#5
fazpedro Membre du Club Inscription : août 2009 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2009 Messages : 360 Points : 64 Points : 64	@ christele_r : j'ai essayé ton code mais cela fait la même chose... mon autocomplétation fonctionne déjà mais je voudrais qu'en cliquant sur l'un des résultats dans les suggestions, j'obtienne directement la liste des résultats "comme Google" sans avoir à cliquer sur le bouton...
	00

28/09/2011, 15h48	#8
christele_r Membre chevronné Christele Inscription : novembre 2009 Messages : 661 Détails du profil Informations personnelles : Nom : Christele Âge : 39 Localisation : France Informations professionnelles : Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : novembre 2009 Messages : 661 Points : 690 Points : 690	Tu sais je ne suis pas certaine de la compatibilitée 100% Mais testes cela http://www.lgms-fr.com/ajax.php tapes f par exemple puis choisis et clic france ça devrait aller dans la zone de saisie non ?
	00

28/09/2011, 16h18	#9
fazpedro Membre du Club Inscription : août 2009 Messages : 360 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : août 2009 Messages : 360 Points : 64 Points : 64	oui christele_r cela va dans la zone de saisie mais hélas cela ne fait pas le "click" sur "envoyer" comme je le souhaite... pour avoir les résultats...
	00

04/10/2011, 10h38	#12
christele_r Membre chevronné Christele Inscription : novembre 2009 Messages : 661 Détails du profil Informations personnelles : Nom : Christele Âge : 39 Localisation : France Informations professionnelles : Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : novembre 2009 Messages : 661 Points : 690 Points : 690	Submite ne sert a rien si le champ imput n'est pas rempli ! Utilise la logique que je t'ais indiquée, et surtout réfléchis un peut.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email