UI Autocomplete. Adaptation d'un champ d'autocomplétion
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 :
http://i69.servimg.com/u/f69/11/09/38/89/210.png
un joli champ de recherche
http://i69.servimg.com/u/f69/11/09/38/89/2_511.png
Un "autocomplete" très simple
http://i69.servimg.com/u/f69/11/09/38/89/310.png
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:
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:
function log(message)
D'avance, merci beaucoup... je patauge un peu dans toutes ces fonctions ! :calim2:
Voici le lien vers la version originale de la fonction : Autocomplete sur JqueryUI
