Bonjour,

J'utilise l'Autocomplete de jQuery UI en suivant le code de la demo http://jqueryui.com/demos/autocomplete/#remote :
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>
$(function() {
	function log( message ) {
		$( "<div/>" ).text( message ).prependTo( "#log" );
		$( "#log" ).attr( "scrollTop", 0 );
	}
 
	$( "#birds" ).autocomplete({
		source: "search.php",
		minLength: 2,
		select: function( event, ui ) {
			log( ui.item ?
				"Selected: " + ui.item.value + " aka " + ui.item.id :
				"Nothing selected, input was " + this.value );
		}
	});
});
</script>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
 
<div class="demo">
	<div class="ui-widget">
		<label for="birds">Birds: </label>
		<input id="birds" />
	</div>
	<div class="ui-widget" style="margin-top:2em; font-family:Arial">
		Result:
		<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
	</div>
</div><!-- End demo -->
Si je choisis successivement par ex. 3 items dans la liste , le code html généré est du type :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
Result:
<div id="log" class="ui-widget-content" style="height: 200px; width: 300px; overflow: auto;">
   <div>Selected: Spotted Crake aka 1</div>
   <div>Selected: Corn Bunting aka 2 </div>
   <div>Selected: Avocet aka 3 </div>
</div>
Je souhaiterais compléter ce code pour supprimer de façon différenciée l'affichage d'un item rapatrié dans la DIV "log". En cliquant sur une croix en face d'un item présent dans la DIV '"log", cela ferait disparaître l'item considéré de cette DIV. Je pense que chaque <div>Selected:,,,</div> pourrait être différenciée en lui affectant la valeur unique du ui.item.id.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
Result:
<div id="log" class="ui-widget-content" style="height: 200px; width: 300px; overflow: auto;">
   <div id="1">Selected: Spotted Crake aka 1 <span>X</span></div>//si je clique sur cette croix la div ayant l'ID1 disparaît
   <div id="2">Selected: Corn Bunting aka 2 <span>X</span></div>//si je clique sur cette croix la div ayant l'ID2 disparaît
   <div id="3">Selected: Avocet aka 3 <span>X</span></div>//si je clique sur cette croix la div ayant l'ID3 disparaît
</div>
Mais je suis débutant et ne vois pas comment mettre en pratique mon idée. Pouvez-vous m'aider ? Merci.