[AJAX] envoi du formulaire lors du click
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:
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:
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> Recherche par artiste </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:
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 !!!';
}
?> |
