Débutant. UI Autocomplete et ajax

Version imprimable

Bonjour à tous,

je viens solliciter votre aide car je debute en Jquery et je suis un peu (beaucoup) perdu :(

j'ai téléchargé l'autocomplete de uiquery et donc j'ai un champ input texte qui contient par defaut la valeur "Paris"

j'ai trouvé un code sur le net qui mêle ajax et jquery pour faire de l'autocomplete que voici :
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 $.ajax({ // Requete ajax type: "POST", // envoie en POST url: "http://www.monsite.com/base.php", // url cible du script PHP async: true, // mode asynchrone data: "debut=" + this.val(), // données envoyées success: function(xml){ // Lorsque le PHP à renovyé une réponse var elementsArray = new Array(); $(xml).find('option').each(function(){ // pour chaque "element" elementsArray.push($(this).text()); // ajout dans le tableau }); $("input#ad").autocomplete({source: elementsArray}, { minLength: 3 }); // activation de l'autocompletion } // fin success }); // requete ajax
donc comme je debute je ne suis meme pas sur que ça corresponde à l'autocomplete ui car dans les demos apparement on peut directement intégrer ajax dans l'autocomplete, enfin...

donc j'interoge mon script php qui me renvoit un resultat xml. le truc qui m'embete avec ça c'est que tout le monde peut accéder à mon fichier base.php et accéder à la liste complete. du coup je me suis dit de passer les informations en POST avec la variable debut qui récupère le texte que je suis entrain de taper dans mon input.

en gros j'ai deux questions :
- je n'arrive pas à récupérer la valeur de mon input que je suis entrain de taper, j'ai essayé $("input#ad").val() ça ne marche pas non plus mais ça vient apparement du fait que jquery ne prend les infos qu'au chargement de la page. auriez vous une idée pour faire ça proprement s'il vous plait ?

- comment protéger mon fichier base.php ? y a t'il une technique pour protéger le code ? j'avoue que je ne connais quasiment que le coté serveur et pas du tout habitué à javascript et j'aimerai bien cacher tout ça.

comme vous voyez je suis un peu perdu et pour résumer je veux juste un script tout con qui interroge mon .php en passant une variable du type debut="mot que je tape dans mon input" et qui me retourne un xml

merci d'avance :)

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $.ajax({ // Requete ajax type: "POST", // envoie en POST url: "http://www.monsite.com/base.php", // url cible du script PHP async: true, // mode asynchrone data: { "debut=" + this.val(), // données envoyées ValeurInput: $('input[type=text][name=NAME_DE_INPUT]').val(), } success: function(xml){ // Lorsque le PHP à renovyé une réponse var elementsArray = new Array(); $(xml).find('option').each(function(){ // pour chaque "element" elementsArray.push($(this).text()); // ajout dans le tableau }); $("input#ad").autocomplete({source: elementsArray}, { minLength: 3 }); // activation de l'autocompletion } // fin success }); // requete ajax
J'ai indenté ton code, je ne sais pas si c'est parfait, mais toujours mieux..

Pour récupérer la valeur de ton input il faut que tu procède ainsi :

Code:

ValeurInput: $('input[type=text][name=NAME_DE_INPUT]').val(),

Et dans ton php tu récupère ta valeur comme ceci :

Code:

$_POST['ValeurInput']

Ensuite pour que ton code soit pris en compte dès le démarrage il faut mettre ceci :
Code:

1 2 3 4 $(document).ready( function () { TA REQUETE AJAX });
Sinon, le mettre en fonction et appeler cette fonction au bon moment...

Pour essayer de protéger ton code javascript tu peux l'encoder, mais toujours garder le fichier propre car pour le décoder, c'est le bordel :aie:
Voici un site qui te le fera : http://javascriptcompressor.com/

Après, je suis débutante en jQuery, et très sincèrement, je n'ai pas réellement comprise l'histoire du xml...
Que souhaites tu faire exactement, une auto-complétion ?

Voilà, en espérant que cela t'aide un peu...

16/11/2010, 22h42
flyoman

salut

et merci pour ta réponse :)

pour l'input ça marche pas malheureusement, apparement faut essayer de chopper un truc en .term pour avoir la saisie et non la valeur de l'input au chargement de la page mais bon le .term j'arrive pas à le faire pour l'instant non plus...
là le seul truc qui marche, c'est quand je re-tape le champ value qui est déjà présent au chargement de la page avec ce code :

Code:

"debut="+ $('input[type=text][name=name de mon input]').val(),

, signe que c'est la valeur de mon input que j'arrive pas à chopper.

merci pour le reste et le lien notamment, j'irai voir ça quand j'arriverai à faire un truc fonctionnel :mrgreen:

sinon oui je veux faire de l'auto completion, en fait le xml est renvoyé par le script php, mais j'ai vu des scripts qui renvoient du JSON, apparement c'est pas mal non plus...

je continue mes recherches ! mais si jamais quelqu'un à la réponse je prends aussi lol :mouarf:

thanks!

Code:

1 2 3 4 5 6 7 8 9 $.ajax({ // Requete ajax type: "POST", // envoie en POST url: "http://www.monsite.com/base.php", // url cible du script PHP async: true, // mode asynchrone data: { "debut=" + this.val(), // données envoyées ValeurInput: $('input[type=text][name=NAME_DE_INPUT]').val(), }
Procédons par étapes...

async étant par défaut "true" tu n'a pas besoin de le mettre.
Ensuite, dans ton data, il y a quelque chose qui me perturbe... je ne sais pas à quoi se rapporte ton this, mais moi, je verrais plutôt ceci :

Code:

debut: $(this).val(),

En ce qui concerne le Json, cela permet de pouvoir renvoyé depuis le codes php des structures de données complexe comme des tableaux qui pourront directement être exploité côté javascript.

Voici un exemple d'utilisation :
Code:

1 2 3 $tableau = array("premier" => $premier, "deuxieme" => $deuxieme); echo json_encode($tableau);
Code:

1 2 3 4 5 6 7 8 var MonPremierResultat; var MonDeuxiemeResultat; function testJson(data) { MonPremierResultat = data.premier; MonDeuxiemeResultat = data.deuxieme; }
Et dans ton .ajax, il suffit d'ajouter
Code:

1 2 dataType: "json",
Voilà, j'espère être clair et ne pas t'avoir perdu ;)

17/11/2010, 22h10
flyoman

hello !

et merci pour la réponse :)

je crois que le this ne se rapporte à rien :calim2:

ok pour le json, je comprends à peu près le concept par contre ce que je comprends un peu moins c'est toutes ces histoires de fonctions imbriquées. j'ai trouvé un exemple ici :

http://blog.seanja.com/2010/03/using...mplete-widget/

qui m'a l'air pas mal du tout mais franchement les fonctions appelées avec les paramètres qui sont dedans là je suis paumé !

notamment le

Code:

source: function(request, response) {

je suppose que le request fait reference au .ajax et le response à la fonction response dans success ?

j'arrive pas à voir ce que pourrai retourner le data dans la partie ajax aussi ?

enfin la fonction response se sert de data pour faire un "explode" de l'array json apparement.

bref c'est un peu confu :mrgreen: mais je vais regarder ça plus en détail quand j'aurai le temps !

en tout cas merci
18/11/2010, 09h10
scourjean

Tu n'as pas trouvé ton bonheur sur
http://jqueryui.com/demos/autocomplete/
Il y a plusieurs démos dont une pour récupérer une source Json

hey merci ça y est j'ai réussi ^^

voici le code tout con au final si ça interesse quelque pour plus tard :

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
 
$("input#ad").autocomplete({
	source: function(request, response) {
 
			$.ajax({
				url: "http://www.monsite.com/base.php",
				dataType: "json",
					type: "POST",
				data: {
					q: request.term
				},
				success: function(data) {										response($.map(data, function(item) {
						return {
							value: item.label
						}
					}));
				}
			});
 
	},
		minLength: 3,
		select: function(event, ui) {
				this.close
	},
		open: function() {
		$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
	},
		close: function() {
		$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
	}
});

et mon php retourne du json du type :

Code:

1
2
"label" => "donnee1",
"label" => "donnee2"