Refs #2102. Autocomplete is working now.

2 files changed, 27 insertions, 9 deletions

diff --git a/js/lib/autocomplete.js b/js/lib/autocomplete.js
index 917326d4f..748070eaa 100644
--- a/js/lib/autocomplete.js
+++ b/js/lib/autocomplete.js
@@ -5,18 +5,35 @@ elgg.provide('elgg.autocomplete');
 
 elgg.autocomplete.init = function() {
 	$('.elgg-input-autocomplete').autocomplete({
-		source: elgg.autocomplete.url, //gets set by input/autocomplete
+		source: function( request, response ) {
+			$.ajax({
+				url: elgg.autocomplete.url, //gets set by input/autocomplete
+				dataType: "json",
+				data: {
+					q: request.term
+				},
+				success: function( data ) {
+					response( $.map( data, function( item ) {
+						item.value = item.name;
+						return item;
+					}));
+				}
+			})
+		},
 		minLength: 1,
 		select: function(event, ui) {
 			var item = ui.item;
-			$(this).val(item.name);
-	
-			var hidden = $(this).next();
+			item.value = item.name;
+				
+			if($(this).next().attr('type') == "hidden"){
+				var hidden = $(this).next();
+			} else {
+				var hidden = $(this).after('<input type="hidden" name="'+this.name+'[]" />').next();
+			}
 			hidden.val(item.guid);
 		}
 	})
 	
-	//@todo This seems convoluted
 	.data("autocomplete")._renderItem = function(ul, item) {
 		switch (item.type) {
 			case 'user':
@@ -31,9 +48,9 @@ elgg.autocomplete.init = function() {
 		
 		return $("<li/>")
 			.data("item.autocomplete", item)
-			.append(r)
+			.append('<a>'+r+'</a>')
 			.appendTo(ul);
 	};
 };
 
-elgg.register_hook_handler('init', 'system', elgg.autocomplete.init);
\ No newline at end of file
+elgg.register_hook_handler('init', 'system', elgg.autocomplete.init);
diff --git a/views/default/css/elements/forms.php b/views/default/css/elements/forms.php
index e5ffb8af2..0b88c6bda 100644
--- a/views/default/css/elements/forms.php
+++ b/views/default/css/elements/forms.php
@@ -352,7 +352,7 @@ input[type="radio"] {
 	margin: 0;
 }
 
-.ui-autocomplete li {
+.ui-autocomplete li a {
 	margin: 0px;
 	padding: 2px 5px;
 	cursor: default;
@@ -380,9 +380,10 @@ input[type="radio"] {
 	background-color: #eee;
 }
 
-.ui-autocomplete li:hover {
+.ui-autocomplete .ui-state-hover {
 	background-color: #4690D6;
 	color: white;
+	text-decoration: none;
 }
 
 .ui-autocomplete strong {