autocompletion et php

Version imprimable

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:

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:

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.

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:

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 :)

Citation:
Envoyé par 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:

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);"

Citation:

Envoyé par Lideln75

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

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:

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:

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 !

12/06/2009, 12h10
Lideln75
Citation:

Envoyé par floopi51

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:

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é)
12/06/2009, 12h12
Lideln75

Citation:

Envoyé par 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 ?

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 :)