auto complétion et boutons radio

Version imprimable

Bonjour ou bonsoir à tous,
je viens solliciter votre aide une fois de plus :D

j'ai un script de recherche en auto complétion avec un input type text et en plus des boutons type radio.

Quand je commence à saisir des données dans l'input cela me renvoi les résultats dans une div et de plus si je choisis l'un des radio cela filtre suivant la value du radio, mais dans le cas de mon script je suis obligé de retourner dans l'input pour que le filtrage se fasse correctement.

J'aimerai si c'est possible que le filtrage se fasse directement quand je clique sur le radio désiré une fois l'input saisi ou quand je renseigne l'input avec un radio déjà sélectionné.

En fait que cela fonctionne dans un sens comme dans un autre. ( je sais pas si je suis très clair :) )

Si l'un de vous veut bien m'aider merci par avance.

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
 
<script type="text/javascript"> 
$(document).ready(function() {
 
  //à la modification du champs recherche
  $("#client").keyup(function(){
      var radio = $('input[type=radio][name=etat_cde]:checked').attr('value');
      var req=$(this).attr("value");
      //chargement ajax
    	$.ajax({
      type: "GET",
      url: "./index_box_recherche_rapide_client_ajax.php?grade=<?php echo $grade_grade;?>&lien=<?php echo $str;?>&etat_cde="+radio+"&req="+req,
      dataType : "html",
      //affichage de l'erreur en cas de problème
      error:function(msg, string){
      alert( "Error !: " + string );
      },
      success:function(data){
      //alert(data);
      $("#suggest").empty();
      $("#suggest").append(data);
      }});
  });
})
</script>
 
 
<?php
 
echo'
&nbsp;&nbsp;ou Par Client : <input type="text" id="client">
&nbsp;&nbsp;
Tous <INPUT type= "radio" name="etat_cde"'; if (isset($_POST["etat_cde"])) { if ($_POST["etat_cde"] == "Tous") { echo "checked"; } } echo'  value="Tous">
&nbsp;&nbsp;|&nbsp;&nbsp;
&nbsp;&nbsp;
En Plannification <INPUT type= "radio" name="etat_cde"'; if (isset($_POST["etat_cde"])) { if ($_POST["etat_cde"] == "Plannification") { echo "checked"; } } echo'  value="Plannification">
&nbsp;&nbsp;|&nbsp;&nbsp;
En Fabrication <INPUT type= "radio" name="etat_cde"'; if (isset($_POST["etat_cde"])) { if ($_POST["etat_cde"] == "Fabrication") { echo "checked"; } } echo' value="Fabrication">
&nbsp;&nbsp;|&nbsp;&nbsp;
En Partiel <INPUT type= "radio" name="etat_cde"'; if (isset($_POST["etat_cde"])) { if ($_POST["etat_cde"] == "Livraison-Partielle") { echo "checked"; } } echo' value="Livraison-Partielle">
&nbsp;&nbsp;|&nbsp;&nbsp;
En Livraison <INPUT type= "radio" name="etat_cde"'; if (isset($_POST["etat_cde"])) { if ($_POST["etat_cde"] == "Livraison-Complete") { echo "checked"; } } echo' value="Livraison-Complete">
&nbsp;&nbsp;
';
 
?>

22/09/2013, 17h19
NoSmoking

Bonjour,
as tu essayé de remettre le focus sur l'input une fois le radio coché?

J'ai peut être mal saisie le soucis!
22/09/2013, 18h33
splif

:) il y a pas de réel soucis car cela fonctionne le but étant d'actualiser la liste ( les résultats ) une fois le radio coché ( si il y a déjà une saisie dans l'input )

Non j'ai pas testé de redonner le focus dans l'input une fois le radio coché :).

j'ai donc testé avec le focus dans l'input

j'ai adapté le code comme cela et ça fonctionne.... mais je sais pas si c'est bien propre :calim2:

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
 
 
    <script type="text/javascript">
    function donneFocus(id)
    {
    var element = document.getElementById(id);
    element.focus();
    }
    </script>
 
 
<script type="text/javascript">
 
$(document).ready(function() {
 
  //à la modification du champs recherche
  $("#client").keyup(function(){
      var radio = $('input[type=radio][name=etat_cde]:checked').attr('value');
      var req=$(this).attr("value");
      //chargement ajax
    	$.ajax({
      type: "GET",
      url: "./index_box_recherche_rapide_client_ajax.php?grade=<?php echo $grade_grade;?>&lien=<?php echo $str;?>&etat_cde="+radio+"&req="+req,
      dataType : "html",
      //affichage de l'erreur en cas de problème
      error:function(msg, string){
      alert( "Error !: " + string );
      },
      success:function(data){
      //alert(data);
      $("#suggest").empty();
      $("#suggest").append(data);
      }});
  });
})
 
 
$(document).ready(function() {
 
  //à la modification du champs recherche
  $("#client").focus(function(){
      var radio = $('input[type=radio][name=etat_cde]:checked').attr('value');
      var req=$(this).attr("value");
      //chargement ajax
    	$.ajax({
      type: "GET",
      url: "./index_box_recherche_rapide_client_ajax.php?grade=<?php echo $grade_grade;?>&lien=<?php echo $str;?>&etat_cde="+radio+"&req="+req,
      dataType : "html",
      //affichage de l'erreur en cas de problème
      error:function(msg, string){
      alert( "Error !: " + string );
      },
      success:function(data){
      //alert(data);
      $("#suggest").empty();
      $("#suggest").append(data);
      }});
  });
})
</script>

Comme tu utilises jQuery autant l'utiliser jusqu'au bout.

Code:

1
2
3
function donneFocus(id){
  $('#' +id).focus();
}

idem pour tes fonctions, tu peux factoriser en utilisant la méthode .on().

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("#client").on('keyup focus', function () {
  var radio = $('input[type=radio][name=etat_cde]:checked').attr('value');
  var req = $(this).attr("value");
  //chargement ajax
  $.ajax({
    type: "GET",
    url: "./index_box_recherche_rapide_client_ajax.php?grade=<?php echo $grade_grade;?>&lien=<?php echo $str;?>&etat_cde=" + radio + "&req=" + req,
    dataType: "html",
    //affichage de l'erreur en cas de problème
    error: function (msg, string) {
      alert("Error !: " + string);
    },
    success: function (data) {
      //alert(data);
      $("#suggest").empty();
      $("#suggest").append(data);
    }
  });
});

23/09/2013, 20h00
splif

Réponse un peu tardive désolé :aie:

Nikel et beaucoup plus simplifié en effet :ccool: et plus propre surtout.

Donc si j'ai bien compris la méthode .on() permet de cumuler dans plusieurs events.

Merci pour ton aide :lol: