Autocomplete improvement

css/style.css

@@ -55,4 +55,9 @@ float:left;
 	right:72px;
 	padding: 10px;
 	background-color: #ddd;
+}
+
+#invitee-list li{
+	padding: 5px 0 5px 20px;
+	background: url('%webroot%/core/img/actions/delete.svg') 0 50% no-repeat;
 }

js/office.js

@@ -149,6 +149,9 @@ $(document).ready(function() {
 	$('#odf_close').live('click', officeMain.onClose);
 	$('#odf_invite').live('click', officeMain.onInvite);
 	$('#invite-send').live('click', officeMain.sendInvite);
+	$('#invitee-list li').live('click', function(){
+		$(this).remove();
+	});
 	
 	$('#inivite-input').autocomplete({
 		minLength: 1,
@@ -163,15 +166,18 @@ $(document).ready(function() {
 			});
 		},
 		select: function(event, el) {
-			var item = $(
-					'<li>'
+			event.preventDefault();
+			var item = $( 
+					'<li title="'
+					+ t('office', 'Remove from the list')
+					+ '" >'
 					+ el.item.label
 					+ '<input type="hidden" name="invitee[]" value="'
 					+ el.item.value
 					+ '" />'
 					+ '</li>'
 					);
-			$('#invitee-list').append(item);
+			$('#invitee-list').prepend(item);
 		}
 	});
 	

templates/documents.php

@@ -1,7 +1,7 @@
 <div id="controls">
 	<div id="invite-block" style="display:none">
 		<input id="inivite-input" type="text" />
-		<div id="invitee-list"></div>
+		<ul id="invitee-list"></ul>
 		<button id="invite-send"><?php p('Send Invitation') ?></button>
 	</div>
 </div>