Discussion :

[przvl]

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 :

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
<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.

[lalouve]

Bonjour,

Il faut intercepter l'évènement "submit" du formulaire pour rester sur la même page en cliquant sur le bouton ou en validant avec la touche Entrée.

Essaie le code 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
36
37
38
39
40
41
42
43
<script type="text/javascript" src="jquery.3.1.1.js"></script>

<script type="text/javascript">

getResults = function(q) {
  var q = $('#q');

  if(q.val().length > 2 ) { 
    $.ajax({
      type : 'GET', url : 'pr007_test.php' , data : 'q=' + q.val(), beforeSend : function() {
        q.after('<img src="ajax-loader.gif" alt="loader" id="ajax-loader" />');
      },
      success : function(data){
        $('#ajax-loader').remove();
        $('#results').html(data);
      }
    });
  }
};

$(document).ready( function() {
  $('#search-form').submit(function(event) {
    event.preventDefault();
    getResults();    
  });

  $('#q').keyup(function() {
    getResults();
  });
}); 

</script> 

<div style="margin-top:20px; min-height:100px; width:100%; ">   
  <form id="search-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>

[przvl]

Pas eu le temps de répondre avant mais merci pour la solution.
Bonne fin de journée