UI Autocomplete : valeur de l'élement "highlighted"

**michon** · 25/01/2011, 10h39

Bonjour,

Je débute en javascript, et j'ai réalisé une autocompletion manuel sans utilser de librairies. Ensuite, j'ai vu que JQuery proposé des composants de ce type, et je souhaite donc refaire tout cela en passant par JQuery.

Seulement, je bloque sur comment récupérer la valeur de l'élément surligné. Car je souhaite la mémoriser, afin de pouvoir la supprimer de la liste d'identifiants possible si l'utilisateur presse la touche "suppr". (Même fonctionnement que l'autocomplete de firefox).

voici mon code en question :

Fichier HTML :

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
 
<script type="text/javascript">
    $(function(){
 
    //Autocomplete
    $("#autocomplete").autocomplete({ 
        minLength: 0,
        source: getCookie()
    });
 
    $("#autocomplete").dblclick(function() {$(this).autocomplete("search");});
    $('.ui-menu-item a').live('mouseover mouseout', function(event){rememberSelectedItem(event);});
 
    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); }
    );
 
});
</script>
 
...
...
<td>Username: <!-- Autocomplete -->		
    <input id="autocomplete" style="z-index: 100; position: relative" title="type &quot;a&quot;" />
</td>
<td>Remember: 
    <input type="checkbox" name="rememberMe" id="rememberId" value="remember" />
<td>

Et voici pour le JS :

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
 
var suggests = [];
var canDelete = false;
var deletableValue = '';
var cookieName = 'username';
 
function getCookie()
{
	return ["alert","attention","test","zouzou"];
}
 
function rememberSelectedItem(event)
{
	if(event.type == 'mouseover'){
		document.getElementById('rememberId').checked = true;
		deletableValue = 'test';
		document.getElementById('autocomplete').value = deletableValue;
		canDelete = true;
	}
	else{
		document.getElementById('rememberId').checked = false;
		deletableValue = '';
		canDelete = false;
	}
}

Donc la check box passe bien à "true" lors du survol d'un élément proposé par l'autocomplete, et repasse à false lorsque l'on ne survol plus d'élements.

Cela me confirme que mes évenement "mouseover" et "mouseout" fonctionnent correctement, mais je n'arrive pas récuperer la valeur de l'élément survolé.

Si quelqu'un à une idée, une piste, je vous en serais reconnaissant

Edit : c'est la variable "deletableValue" dans le javaScript qui doit prendre la valeur de l'élément survolé...

**michon** · 25/01/2011, 14h19

Petit complément sur mes tentatives :

En essayant de récuperer l'ID de la façon suivante :

Code :

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

1
2
 
deletableValue = event.target.id;

j'obtient pour le survole de n'importe quel choix possible :

ui-active-menuitem

Je pensais donc cela pas mal, mais en appliquant un "Value" de la manière suivante :

Code :

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

1
2
3
4
 
deletableValue = event.target.id.Value;
// or
deletableValue = event.target.Value;

Je récupère une valeur "undefined" dans les deux cas... J'avoue ici ne pas bien comprendre pourquoi.

voici l'apparence de l'appli si cela peut vous aider :

**danielhagnoul** · 25/01/2011, 23h18

Bonsoir

val() : http://api.jquery.com/val/

Je pense que le code ci-dessous est correct. Voir les commentaires du code dans le code.

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.9.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; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* TEST */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
<!--
Attention pas : <input id="autocomplete" style="z-index: 100; position: relative" title="type "a"" />
mais : <input id="autocomplete" style="z-index:100; position:relative;" title="type a" />
-->
 
Username: <!-- Autocomplete -->		
<input id="autocomplete" style="z-index:100; position:relative;" title="type a" />
Remember: 
<input type="checkbox" name="rememberMe" id="rememberId" value="remember" />
 
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.9.custom.min.js"></script>
	<script>
		$(function(){
var suggests = [],
	canDelete = false,
	deletableValue = '',
	cookieName = 'username';
 
function getCookie(){
	return ["alert","attention","test","zouzou"];
}
 
function rememberSelectedItem(event){
	if(event.type == 'mouseover'){
		$("#rememberId").attr("checked", "checked");
		deletableValue = "test";
		$("#autocomplete").val(deletableValue);
		canDelete = true;
	} else {
		$("#rememberId").attr("checked", "");
		deletableValue = $("#autocomplete").val();
		canDelete = false;
	}
}
 
//Autocomplete
$("#autocomplete").autocomplete({ 
	minLength: 0,
	source: getCookie()
});
 
/*
 * Le dblclick n'est pas fiable et
 * il n'est pas interprété de la
 * même manière par tous les
 * navigateurs.
 */
$("#autocomplete").dblclick(function() {
	$(this).autocomplete("search");
});
 
/*
 * mouseout est à bannir
 * au profit de mouseleave
 */
$('.ui-menu-item a').live('mouseover mouseleave', function(event){
	rememberSelectedItem(event);
});
 
/*
 * ul#icons : non !
 *
 * Un id doit être unique pour la page web
 * et il s'agit d'une référence de première
 * classe qui se suffit à elle même.
 */
 
//hover states on the static widgets
$('#dialog_link, #icons li').hover(
	function() {
		$(this).addClass('ui-state-hover');
	}, 
	function() {
		$(this).removeClass('ui-state-hover');
	}
);
		});
	</script>
</body>  
</html>

**michon** · 26/01/2011, 10h19

Merci pour ces précisions et conseils.

j'ai modifié mon script en tenant compte de tes remarques, et la récupération du champ "autocomplete" ne pose plus aucun souci. Je vais voir comment changer le "dblclick" afin d'avoir une solution plus fiable.

Néanmoins, malgré tout cela, je n'arrive toujours pas à récupérer la valeur de l'élément survolé. Je me suis surement mal exprimé plus haut, mais dans le screen de mon précedent message, à la place de "undefined" j'aimerais avoir "attention".

J'ai besoin de mémoriser la valeur de l'élement sur lequel pointe la souris, sans pour autant que l'utilisateur valide ce choix. Donc pour faire simple, si je met la souris sur "attention", le champ autocomplete doit prendre la valeur "attention". Si je met le curseur sur "alert", le champ autocomplete doit prendre la valeur "alert"... et cela sans même que l'utilisateur ne click ou ne presse une touche.

**michon** · 26/01/2011, 11h18

je viens de réussir en passant le paramètre ( $(this) ) en plus de l'envent :

Code :

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

1
2
 
$('.ui-menu-item a').live('mouseover mouseleave', function(event){rememberSelectedItem($(this),event);});

et le code de la fonction :

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
 
function rememberSelectedItem(thisItem,event)
{
	if(event.type == 'mouseover'){
		$("#rememberId").attr("checked", "checked");
		deletableValue = thisItem.text();
		$("#autocomplete").val(deletableValue);		
		canDelete = true;
	}
	else{
		$("#rememberId").attr("checked", "");
		deletableValue = '';
		$("#autocomplete").val(deletableValue);	
		canDelete = false;
	}
}

Et je récupère donc bien la valeur au survol de la souris. Merci pour votre aide, et si vous avez des suggestions d'améliorations, n'hésitez pas.

**danielhagnoul** · 26/01/2011, 23h20

Bonsoir

C'est une bonne solution, mais comme on n'utilise pas l'objet, mais uniquement le texte qu'il contient, je propose :

Code javascript :

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
$('.ui-menu-item a').live('mouseover mouseleave', function(event){
	rememberSelectedItem($(this).text(), event);
});
 
function rememberSelectedItem(menuItem, event){
	if(event.type == 'mouseover'){
		$("#rememberId").attr("checked", "checked");
		deletableValue = menuItem;
		$("#autocomplete").val(deletableValue);
		canDelete = true;
	} else {
		$("#rememberId").attr("checked", "");
		deletableValue = "";
		$("#autocomplete").val(deletableValue);
		canDelete = false;
	}
}

**michon** · 27/01/2011, 09h27

Bien reçu, il n'est en effet pas nécessaire de passer tout l'objet en paramètre...

merci

UI Autocomplete : valeur de l'élement "highlighted"

jQuery

Discussions similaires

Partager

Partager