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