Affichage résultat formulaire
Bonjour,
Je suis en train d'intégrer un moteur de recherche à mon site et pour des problèmes de temps de réponse je dois absolument travailler en javascript que je ne connais absolument pas.
Je me suis donc fait aidé par quelqu'un qui m'a fait un bout de code en javascript mais ce quelqu'un n'a pas fini le boulot et il ne peux plus rien faire avant plusieurs semaines et mon moteur de recherche doit être opérationnel sous 48 à 72 heures.
Pour l'instant, lorsque je teste le code j'ai un retour très rapide mais :
- si j'ai cliqué sur le bouton RECHERCHER : je change de page (INCORRECT)
- si j'ai validé la touche Entrée de mon clavier : je change de page (INCORRECT)
- si j'ai cliqué dans la zone de saisie : je reste sur la page (CORRECT)
Je m'adresse donc à vous pour m'aider à résoudre ce problème.Vous trouverez ci-après le code fourni et quelques info complémentaires.
Merci d'avance à celui ou celle qui pourra m'aider
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
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
| <script type="text/javascript" src="jquery.3.1.1.js"></script>
<style>
form.ajax p{
margin:20px 0;
text-align:center;
}
form.ajax label{
font-size:16px;
font-weight:bold;
padding:3px;
}
form.ajax label span{
font-size:16px;
color:#777;
}
form.ajax input{
width:99%;
padding:3px;
border:2px solid #aaa;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
height:40px;
line-height:40px;
}
.zone_saisie{
font-size:20px;
}
#ajax-loader{
margin:15px auto 0 auto;
display:block;
}
div.article-result{
padding:2px 10px 10px 10px;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
div.article-result p.url{
color:#777;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('#q').click(function() {
$field = $(this);
$('#results').html(''); // on vide les resultats
$('#ajax-loader').remove(); // on retire le loader
// on commence à traiter à partir du 3ème caractère saisi
if( $field.val().length > 2 )
{ $.ajax( {
type : 'GET', url : 'pr007_test.php' , data : 'q='+$(this).val() , beforeSend : function() {
$field.after('<img src="ajax-loader.gif" alt="loader" id="ajax-loader" />');
},
success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
$('#ajax-loader').remove(); // on enleve le loader
$('#results').html(data); // affichage des résultats dans le bloc
}
});
}
});
});
</script>
<script>
#ajax-loader{
margin:15px auto 0 auto;
display:block;
}
div.article-result p.url{
color:#777;
}
</script>
<div style="margin-top:20px; min-height:100px; width:100%; ">
<form action="pr007_test.php" method="get">
<div>
<input type="text" style="float:left; width:60%; margin:20px; background-color:#ffffff; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; height:50px; line-height:30px; font-size:20px;" name="q" id="q" placeholder="nom, catégorie, ville, mot-clé..." />
<input type="submit" value = "RECHERCHER" style="margin-left:10px; margin-top:20px; background-color:#89cf34; height:50px; font-size:20px; line-height:30px;">
</div>
</form>
<div id="results" style="background-color:#ffffff;"></div>
</div> |
Pour info, le script pr007_test.php (appelé dans la fonction javascript et dans le formualire) est un script qui fonctionne très bien. C'est un simple SELECT sur la table concernée avec une clause WHERE qui compare (avec LIKE) un champs de ma table avec ce qui a été saisi dans le formulaire (valeur = q) et qui est passé en POST
PS : Si vous voyez des incohérences dans ce script et qu'il y a moyen de "l'alléger" c'est avec plaisir que je suivrai vos conseils.
