UI Autocomplete, modifier le comportement du composant

**Alexdezark** · 19/03/2010, 09h14

lien : http://docs.jquery.com/UI/Autocomplete

Bonjour à tous,

Je cherche à modifier le comportement d'un autocomplete et bien que la documentation semble dire que c'est possible, cela manque un peu de précisions sur comment faire...

Je cherche pourtant à faire quelque chose de simple, je souhaite juste que l'évènement "focus" ne déclenche pas la mise à jour du champ INPUT et que celle-ci soit déclenchée par l'évènement "select".

Au regard de la doc c'est plutôt simple (et ça doit l'être d'ailleurs...)

Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.

Bon mais "canceling this event" pour moi c'est un peu léger comme explication...

J'ai essayé ceci qui fait effectivement que plus rien ne se passe au survol de la liste proposée

Code :

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

1
2
3
4
5
6
	$(function() {
		$("#tags").autocomplete({
			source: "Ajax/clients/options.php",
			focus: function(){return false}
		});
	});

Maintenant je voudrais que si l'on clique sur un élément de la liste celui-ci remplace le contenu de l'INPUT.

D'après la doc c'est le comportement par défaut :

Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.

Or dans mon cas rien ne se passe lorsque l'on clique sur l'élément... si pardon le menu se ferme mais le champ n'est pas mis à jour.

J'ai aussi fait le test suivant pour voir, mais rien ne se passe non plus :

Code :

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

1
2
3
4
5
6
	$(function() {
		$("#tags").autocomplete({
			source: "Ajax/clients/options.php",
			select: function(event,ui){alert(ui.item)}
		});
	});

ne devrais-je pas avoir un alert avec l'élément sélectionné lorsque je clique sur un élément de la liste ?

Merci d'avance pour vos réponses

**danielhagnoul** · 20/03/2010, 11h45

Bonjour.

Votre demande ressemble à celle-ci..

Exemple :

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
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<link rel="stylesheet" type="text/css" href="../UI1.8rc3/css/ui-lightness/jquery-ui-1.8rc3.custom.css"/>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.2.min.js"></script>
	<script charset="CP-1252" src="../UI1.8rc3/js/jquery-ui-1.8rc3.custom.min.js"></script>
	<script>
		$(function(){
			var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
 
			$("#tags").autocomplete({
				source: availableTags,
				focus: function(event, ui){
					return false;
				},
				select: function(event, ui){
					// votre code, éventuellement
				}
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div class="ui-widget">
			<label>Tags: <input id="tags"/></label>
		</div>
	</div>
</body>  
</html>

UI Autocomplete, modifier le comportement du composant

jQuery

Discussions similaires

Partager

Partager