Discussion :

[floopi51]

Bonjour

j'utilise un script d'autocompletion en javascript et j'essaye de recuperer la valeur selectionée pour l'utiliser ensuite en php dans un script "getPays.php"

J'ai trouvé le script d'autocompletion ici.

Comment faire ?

mon formulaire :

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
 
<script type="text/javascript" language="javascript" src="/script/jquery/jquery.js"></script>
<script type="text/javascript" language="javascript" src="/script/jquery/jquery.autocomplete.js"></script>
<script type="text/javascript" language="javascript" src="/script/mypays.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.autocomplete.css"  />
 
<form action="getPays.php" method="post" id="getpays1">
<p>
<select name="info">
  <input class="ac_input" autocomplete="off" id="<?php print($lalangue); ?>" value="" type="text">
  <input type="hidden" name="pays1">
(Shows a max of 10 entries)
</select>
</p>
 
</form>

le script mypays.autocomplete.js : (J'ai ajouté le code en bleu dans le code original pensant pouvoir recuperer le pays sélectionné mais comme j'ai compris après, cela m'ajoute un nouveau champ de formulaire en dessous de l'original !)

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
function findValue(li) {
  if( li == null ) return alert("No match!");
  var sValue = li.selectValue;
  alert("The value you selected was: " + sValue);

  if (document.all){  // pour IE
    monInput = document.createElement("<input name='pays1'>");
  }
  else{ // pour FF et autres navigateurs
    monInput = document.createElement("input");
    monInput.name = "pays1";
  }
 
  // suite du code :
  monInput.type = "text"; 
  monInput.id = "#fr";
  monInput.value = "" + sValue;
 
  // ajout de l'input créé dans le formulaire
  document.getElementById("getpays1").appendChild(monInput);
}
function selectItem(li) {
  findValue(li);
}
function formatItem(row) {
  return row[0] + " (id: " + row[1] + ")";
}

$(document).ready(function() {
	$("#fr").autocompleteArray(
	   ["ANDORRE","EMIRATS ARABES UNIS ","AFGHANISTAN"],
	   {
	   delay:10,
	       delay:10,
	       minChars:1,
	       matchSubset:1,
	       onItemSelect:selectItem,
	       onFindValue:findValue,
	       autoFill:true,
	       maxItemsToShow:10
	       }
	   );
});

Je précise que je débute complètement en javascript.


merci d'avance pour votre aide.

[Lideln75]

Bonjour,

Apparemment tu utilises du jQuery, donc, en partant du principe que le code "en noir" dans ta fonction findValue() est un exemple issu du plugin que tu utilises, voici ce que tu dois mettre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function findValue(oItem)
{
    // Code de base du plugin
    if (oItem == null)
        return alert("No match!");
    var sValue = oItem.selectValue;
 
    // Mettre à jour la valeur du champ texte (on sélectionne l'élément ayant
    // pour classe "ac_input" situé dans l'élément ayant pour id "getpays1"
    // ==> cf la doc de jquery ou bien le très bon "jquery api browser"
    // pour plus d'infos)
    $('#getpays1 .ac_input').val(sValue);
}

Tout simplement

PS : attention, tu utilises "$('#fr').autoblabla", alors que dans ta page, l'id du champ est dynamique et est écrit en PHP ! Donc attention

[floopi51]

Bonjour,

Apparemment tu utilises du jQuery, donc, en partant du principe que le code "en noir" dans ta fonction findValue() est un exemple issu du plugin que tu utilises, voici ce que tu dois mettre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function findValue(oItem)
{
    // Code de base du plugin
    if (oItem == null)
        return alert("No match!");
    var sValue = oItem.selectValue;
 
    // Mettre à jour la valeur du champ texte (on sélectionne l'élément ayant
    // pour classe "ac_input" situé dans l'élément ayant pour id "getpays1"
    // ==> cf la doc de jquery ou bien le très bon "jquery api browser"
    // pour plus d'infos)
    $('#getpays1 .ac_input').val(sValue);
}

Tout simplement

merci !
ça fonctionne mais pas toujours.
Si je selectionne le premier élément donné dans la liste suggérée par l'autocompletion, ça focntionne.
Si je sélectionne un élément plus bas dans la liste, ça ne fonctionne pas.
je n'ai pas de valeur dans "$('#getpays1 .ac_input').val(sValue);"

PS : attention, tu utilises "$('#fr').autoblabla", alors que dans ta page, l'id du champ est dynamique et est écrit en PHP ! Donc attention

je n'ai donné qu'une partie de mon code, j'ai d'autres tableaux pour la completion pour d'autres id ($('#en').autoblabla, etc...

merci

[floopi51]

J'ai résolu le problème en ajoutant un bouton submit.
avec ça, je récupère correctement la valeur sélectionnée.


Je progresse doucement...
Maintenant, je voudrai que mon formulaire permette de sélectionner 2 pays dans 2 champs différents. Et donc que les valeurs soit positionnées pour id=output1 et id=output2.

comment faire ?
mon formulaire revisité :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<form action="getPays.php" method="post" id="getpays1">
<p>
  <input class="ac_input" autocomplete="off" id="<?php print($lalangue); ?>" value="" type="text">
  <input class="ac_input" autocomplete="off" id="<?php print($lalangue); ?>" value="" type="text">
  <input type="submit" value="OK">
  <input id="output1" value="" type="hidden" name="pays1">
  <input id="output2" value="" type="hidden" name="pays2">
(Shows a max of 10 entries)
</p>
 
</form>

et le code jquery / javascript associé :

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
 
function findValue(li) {
  if( li == null ) return alert("No match!");
  var sValue = li.selectValue;
  //alert("The value you selected was: " + sValue);
 
  // Mettre à jour la valeur du champ texte (on sélectionne l'élément ayant
  // pour classe "ac_input" situé dans l'élément ayant pour id "getpays1"
  // ==> cf la doc de jquery ou bien le très bon "jquery api browser"
  // pour plus d'infos)
  $('#output').val(sValue);
}
function selectItem(li) {
  findValue(li);
}
function formatItem(row) {
  return row[0] + " (id: " + row[1] + ")";
}
 
$(document).ready(function() {
	$("#fr").autocompleteArray(
	   ["ANDORRE","ANDORRE","EMIRATS ARABES UNIS",
	    "AFGHANISTAN"],
	   {
	   delay:10,
	       delay:10,
	       minChars:1,
	       matchSubset:1,
	       onItemSelect:selectItem,
	       onFindValue:findValue,
	       autoFill:true,
	       maxItemsToShow:10
	       }
	   );
});

merci d'avance pour votre aide !

[Lideln75]

merci !
ça fonctionne mais pas toujours.
Si je selectionne le premier élément donné dans la liste suggérée par l'autocompletion, ça focntionne.
Si je sélectionne un élément plus bas dans la liste, ça ne fonctionne pas.
je n'ai pas de valeur dans "$('#getpays1 .ac_input').val(sValue);"

Là il va falloir débugger de ton côté... Voir comment fonctionne le plugin, quelles sont les valeurs retournées par les callbacks etc.
Car en se basant sur le code d'exemple fourni par ton plugin, normalement le code que je t'ai donné est bon.

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
function findValue(oItem)
{
    console.log(oItem); // (si tu utilises Firefox et le plugin Firebug)
    //alert(oItem); // pour IE
}

Si le plugin ne marche pas, on n'y peut pas grand chose malheureusement
(à part modifier le code s'il n'est pas packé/obfusqué)

[Lideln75]

J'ai résolu le problème en ajoutant un bouton submit.
avec ça, je récupère correctement la valeur sélectionnée.


Je progresse doucement...
Maintenant, je voudrai que mon formulaire permette de sélectionner 2 pays dans 2 champs différents. Et donc que les valeurs soit positionnées pour id=output1 et id=output2.

comment faire ?

Là c'est la même chose, il faut juste adapter... Mais c'est le même code. Je suis sûr que tu pourras trouver