Discussion :

[l.laurent60]

Bonjour à tous,

J'utilise autocomplete de jquery que j'ai récupérer sur ce site : http://www.nodstrum.com/2007/09/19/autocompleter/

Je cherche comment modifier les parametres afin de pouvoir utiliser les touches 38 et 40 qui sont les flèches haut bas et plus en plus que la sourie.
L'autocomplete de Jquery implémente les touches, donc...

merci par avance pour votre aide.

[ABCIWEB]

C'est implémenté par défaut dans jQuery UI 1.8.5
http://docs.jquery.com/UI/Autocomplete

[l.laurent60]

Bonjour et merci d'avoir répondu,

Nous sommes bien d'accord sur l'implémentation mais pourquoi l'utilisation de :
http://www.nodstrum.com/2007/09/19/autocompleter/ ne le permet pas.
Faut-il ajouter une option du type :
$( ".selector" ).autocomplete( "option", "xxxxxx", 0 ); pour que les touches clavier fonctionnent ?

Merci par avance dans la recherche de la vérité

[ABCIWEB]

Le lien que tu donne date de 2007, la version autocomplete intégrée dans Jquery UI est beaucoup plus récente et je suppose qu'à l'occasion certaines fonctionnalités dont la navigation à l'aide des flèches a été ajoutée...

[l.laurent60]

Effectivement le lien n'est pas très frais, mais c'est le seul que j'ai trouvé qui me permet de faire autocomplete via un fichier php avec une requête SQL.
J'ai testé avec la dernière API Jquery mais en vain.
Si tu connais une implémentation qui fonctionne en faisant une requête SQL je suis bien évidement intéressé, car je ne vois pas ce que je dois modifier.

[danielhagnoul]

Bonsoir

Via un fichier php : http://jqueryui.com/demos/autocomplete/#remote

Code :

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

1
2
3
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>

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
<script>
$(function() {
	function log( message ) {
		$( "<div/>" ).text( message ).prependTo( "#log" );
		$( "#log" ).attr( "scrollTop", 0 );
	}
 
	$( "#birds" ).autocomplete({
		source: "search.php",
		minLength: 2,
		select: function( event, ui ) {
			log( ui.item ?
				"Selected: " + ui.item.value + " aka " + ui.item.id :
				"Nothing selected, input was " + this.value );
		}
	});
});
</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
<div class="demo">
	<div class="ui-widget">
		<label for="birds">Birds: </label>
		<input id="birds" />
	</div>
	<div class="ui-widget" style="margin-top:2em; font-family:Arial">
		Result:
		<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	</div>
</div><!-- End demo -->

[l.laurent60]

Merci pou la réponse j'ai essayé de mettre cela en place.
Un grand merci à tous

[l.laurent60]

Merci pour la réponse mais le serveur que j'utilise ne permet pas de faire du JSON donc retour a la case départ
Donc si vous avez d'autres propositions ou une modification d'implémentation qui pourrais me permettre d'utiliser les touches 48 et 50, se serait très cool.

[danielhagnoul]

Bonsoir

Il y a également un exemple à partir d'un fichier XML : http://jqueryui.com/demos/autocomplete/#xml

Gestion des touches : http://api.jquery.com/event.which/

[l.laurent60]

Bonsoir,

Merci Daniel pour ton aide la solution la plus "simple" serait peut être de modifier l'implémentation afin d'utiliser les touches 48 et 50, mais comment modifier ce code ? Je ne trouve pas la syntaxe !

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
 
function lookup(inputString) {
 
	if(inputString.length == 0) {
		// Hide the suggestion box.
		$('#suggestions').hide();
	} else {
		$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
			if(data.length >0) {
				$('#suggestions').show();
				$('#autoSuggestionsList')
				    .html(data);
 
			}
		});
	}
}

Donc si vous avez la solution... car cela fait deux jours que je rame...

[pierrot10]

Bonjour a tous,

je rejoins la discussion car je me prépare a faire la même chose. En fait je souhaiterais que l'autocomplete ait controler une table d'une base de donnée et retourne les informations nécessaires pour completer les champs d'un formulaire.

Par exemple, si dans le champs nom (ou prénom, ou téléphone) je tape un nom, après le deuxième caratère, le code va contrôler la table "clients" et retourne toutes les noms correspondant aux caratères rentrés.

Puis quand, je clique sur le nom désiré, je récupère toutes les informations du client,stockés dans la table de ma base de donnée, pour les traiter ensuite.

Note:
Aussi je me demande si je ne ferais pas mieux de stocker les informations de la table "clients" dans un array, car si a chaque fois qu'on tape une lettre, il y aura une requête vers la base de donnée. N'es-ce pas????

Donc, j'ai trouvé ce que propose danielhagnoul http://jqueryui.com/demos/autocomplete/#remote, mais ily a un truc que je comprend pas.
Il n'est pas montré comment le fichier search.php doit etre écrit. Car si dans le fichier search.php je fais une requête MySQL pour extraire les informations de la base de donnée, comment jquery va les traiter pour que je puisse les recupérer????????

Merci pour vos lumières

Bonsoir

Via un fichier php : http://jqueryui.com/demos/autocomplete/#remote

Code :

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

1
2
3
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>

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
<script>
$(function() {
	function log( message ) {
		$( "<div/>" ).text( message ).prependTo( "#log" );
		$( "#log" ).attr( "scrollTop", 0 );
	}
 
	$( "#birds" ).autocomplete({
		source: "search.php",
		minLength: 2,
		select: function( event, ui ) {
			log( ui.item ?
				"Selected: " + ui.item.value + " aka " + ui.item.id :
				"Nothing selected, input was " + this.value );
		}
	});
});
</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
<div class="demo">
	<div class="ui-widget">
		<label for="birds">Birds: </label>
		<input id="birds" />
	</div>
	<div class="ui-widget" style="margin-top:2em; font-family:Arial">
		Result:
		<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	</div>
</div><!-- End demo -->

[ABCIWEB]

Donc, j'ai trouvé ce que propose danielhagnoul http://jqueryui.com/demos/autocomplete/#remote, mais ily a un truc que je comprend pas.
Il n'est pas montré comment le fichier search.php doit etre écrit. Car si dans le fichier search.php je fais une requête MySQL pour extraire les informations de la base de donnée, comment jquery va les traiter pour que je puisse les recupérer????????

Merci pour vos lumières

Il est indiqué en bas du code source de ton lien que le fichier doit être du json
"The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option"

Donc tu fais ta requête, tu mets le résultat de ta requête dans un tableau,
tu envoies une entête
header('Content-Type: application/json');
et tu fais
echo json_encode($tab_result_requête);

[l.laurent60]

Ma question est sans Json ? comment peut on faire ?

[ABCIWEB]

Ma question est sans Json ? comment peut on faire ?

Je suppose que ton serveur est une version < php 5.2.0 ce qui fait que tu ne peux pas utiliser cette fonction.
Le mieux serait de migrer vers php 5.2 minimum car de nombreuses classes et exemples de code nécessitent aujourd'hui cette version sans parler des facilités de programmations etc. Donc à terme il faudrait envisager cette solution sinon tu risques d'avoir les mêmes soucis pour chaque évolution du code.

Sinon en attendant, tu devrais pouvoir trouver l'équivalent de cette fonction en php4. Par exemple en rentrant "json php 4" dans google j'ai trouvé ça : http://www.php.net/manual/en/functio...code.php#89908

[l.laurent60]

Bonsoir,

Merci à tous pour votre aide je vais essayer de mettre cela en œuvre.
Car la migration vers un 5.5 n'est hélas pas possible.

[ABCIWEB]

@pierrot10

A propos en relisant ton post je crois que tu fais une confusion.

Le code que tu as trouvé est normalement conçu pour faire des requêtes pour chaque nouveau caractère rentré (passé le deuxième) avec un délai minimum de 300ms (valeur par défaut que tu peux modifier) entre deux requêtes.

Il est donc envoyé une requête vers search.php avec une variable $_GET nommée "term" qui contient les caractères rentrés. Donc dans ta page search.php il faut faire une requête suivant $_GET['term'] et c'est ta requête qui fait le tri et renvoie le tableau JSON de valeurs sélectionnées.

Pour faire moins de requêtes tu peux augmenter le délai minimum entre deux requêtes ou encore utiliser un système de cache qui est en fait l'exemple suivant dans la page contenant le code que tu as trouvé http://jqueryui.com/demos/autocomple...ote-with-cache