UI Autocomplete. Adaptation d'un champ d'autocomplétion

**rom1dvp** · 03/11/2010, 18h05

Bonjour à tous amis développeurs Jquery,

Je me rapproche de vous ce soir afin que vous m'aidiez à transformer la fonction autocomplete de JqueryUI

Mon but :
Créer un champ de recherche qui générera des petites étiquettes que l'on pourra supprimer au besoin grâce à une petite croix.

Un joli schéma vous aidera plus :

un joli champ de recherche

Un "autocomplete" très simple

Quand on choisi un des éléments, il créer "l'étiquette" dont je vous parlais
Avec la petite croix pour supprimer l'élément

Mon code actuel :

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
<html >
<head>
	<link type="text/css" href="jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"></script>
	<link type="text/css" href="demos.css" rel="stylesheet" />
	<style type="text/css">
	.ui-autocomplete-loading { background: white url('ui-anim_basic_16x16.gif') right center no-repeat; }
	</style>
	<script type="text/javascript">
	$(function() {
			function log(message) {
		$("<img />").attr('src','delete.gif').prependTo("#log");
		$("<span/>").text(message).prependTo("#log");
		}
 
		$("#search").autocomplete({
			source: "search.php",
			minLength: 2,
			select: function(event, ui) {
				log(ui.item ? (ui.item.value) :  this.value);
			}
		});
	});
	</script>
</head>
<body>
 
<div >Recherche :  	<input id="search" /></div>
<div>Resultat:	<div id="log"></div></div>
 
 
 
 
</body>
</html>

Pour le moment, j'arrive a avoir une liste (très moche) des éléments, et la fonction "supprimer" est inexistante de ce script.

Je souhaiterais que l'on m'oriente sur la manière de créer mon étiquette correctement avec cette fonction

Code :

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