Autocomplete de jQuery UI

Version imprimable

27/10/2010, 17h35
l.laurent60

Autocomplete de jQuery UI

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.
28/10/2010, 12h55
ABCIWEB

C'est implémenté par défaut dans jQuery UI 1.8.5
http://docs.jquery.com/UI/Autocomplete
28/10/2010, 13h36
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é :lol:
28/10/2010, 14h14
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...
28/10/2010, 15h59
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.

Bonsoir

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

Code:

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

Code:

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:

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

29/10/2010, 10h32
l.laurent60

Merci pou la réponse j'ai essayé de mettre cela en place.
Un grand merci à tous
29/10/2010, 12h28
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 :cry:
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.
29/10/2010, 23h06
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/

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:

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...

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

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

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

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:

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>

02/11/2010, 04h39
ABCIWEB

Citation:

Envoyé par pierrot10

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);
02/11/2010, 09h13
l.laurent60

Ma question est sans Json ? comment peut on faire ?
02/11/2010, 14h30
ABCIWEB

Citation:

Envoyé par l.laurent60

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
02/11/2010, 21h23
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.
03/11/2010, 18h17
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