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