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

function log(message)

D'avance, merci beaucoup... je patauge un peu dans toutes ces fonctions !

Voici le lien vers la version originale de la fonction : Autocomplete sur JqueryUI

**rom1dvp** · 18/11/2010, 14h08

Voici la solution !

Trouvée après maintes et maintes recherches

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
<script type="text/javascript">
 
 
	$(function() {
			function log(message) {
					$("#result").append("<li>"+message+"<input border=0 src='delete_icon.png' class='remove' type=image value='submit'></li>" ); 
			}
	$("#search").autocomplete({
			source: "search.php",
			minLength: 2,
			select: function(event, ui) {
				log(ui.item.value);
			}
		});
	});
	$(".remove").live("click", function() { 
		$(this).parent().remove(); 
	});  
	</script>

Il y a aussi la fonction pour supprimer l'element (sous reserve d'avoir mis class="remove" sur le bouton supprimer)

Bon dev a tous

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager