using html extension to jquery.ui autocomplete

6 files changed, 72 insertions, 46 deletions

diff --git a/engine/lib/elgglib.php b/engine/lib/elgglib.php
index 64bdf9276..5c9479f74 100644
--- a/engine/lib/elgglib.php
+++ b/engine/lib/elgglib.php
@@ -2028,6 +2028,7 @@ function elgg_init() {
 	elgg_register_page_handler('ajax', 'elgg_ajax_page_handler');
 
 	elgg_register_js('elgg.autocomplete', 'js/lib/autocomplete.js');
+	elgg_register_js('jquery.ui.autocomplete.html', 'vendors/jquery/jquery.ui.autocomplete.html.js');
 	elgg_register_js('elgg.userpicker', 'js/lib/userpicker.js');
 	elgg_register_js('elgg.friendspicker', 'js/lib/friends_picker.js');
 	elgg_register_js('jquery.easing', 'vendors/jquery/jquery.easing.1.3.packed.js');
diff --git a/engine/lib/input.php b/engine/lib/input.php
index 127113205..e7c3a3d99 100644
--- a/engine/lib/input.php
+++ b/engine/lib/input.php
@@ -288,13 +288,19 @@ function input_livesearch_page_handler($page) {
 
 				if ($entities = get_data($query)) {
 					foreach ($entities as $entity) {
+						if (in_array('groups', $match_on)) {
+							$value = $entity->guid;
+						} else {
+							$value = $entity->username;
+						}
+
 						$result = array(
 							'type' => 'user',
 							'name' => $entity->name,
 							'desc' => $entity->username,
-							'icon' => '<img class="elgg-livesearch-icon" src="' .
-								get_entity($entity->guid)->getIconURL('tiny') . '" />',
-							'guid' => $entity->guid
+							'guid' => $entity->guid,
+							'label' => elgg_view_list_item(get_entity($entity->guid), array('hover' => false)),
+							'value' => $value,
 						);
 						$results[$entity->name . rand(1, 100)] = $result;
 					}
@@ -319,9 +325,9 @@ function input_livesearch_page_handler($page) {
 							'type' => 'group',
 							'name' => $entity->name,
 							'desc' => strip_tags($entity->description),
-							'icon' => '<img class="elgg-livesearch-icon" src="'
-								. get_entity($entity->guid)->getIconURL('tiny') . '" />',
-							'guid' => $entity->guid
+							'guid' => $entity->guid,
+							'label' => elgg_view_list_item(get_entity($entity->guid)),
+							'value' => $entity->guid,
 						);
 
 						$results[$entity->name . rand(1, 100)] = $result;
@@ -350,9 +356,9 @@ function input_livesearch_page_handler($page) {
 							'type' => 'user',
 							'name' => $entity->name,
 							'desc' => $entity->username,
-							'icon' => '<img class="elgg-livesearch-icon" src="'
-								. get_entity($entity->guid)->getIconURL('tiny') . '" />',
-							'guid' => $entity->guid
+							'guid' => $entity->guid,
+							'label' => elgg_view_list_item(get_entity($entity->guid), array('hover' => false)),
+							'value' => $entity->username,
 						);
 						$results[$entity->name . rand(1, 100)] = $result;
 					}
diff --git a/js/lib/autocomplete.js b/js/lib/autocomplete.js
index 917326d4f..46d72d146 100644
--- a/js/lib/autocomplete.js
+++ b/js/lib/autocomplete.js
@@ -5,35 +5,10 @@ elgg.provide('elgg.autocomplete');
 
 elgg.autocomplete.init = function() {
 	$('.elgg-input-autocomplete').autocomplete({
-		source: elgg.autocomplete.url, //gets set by input/autocomplete
-		minLength: 1,
-		select: function(event, ui) {
-			var item = ui.item;
-			$(this).val(item.name);
-	
-			var hidden = $(this).next();
-			hidden.val(item.guid);
-		}
+		source: elgg.autocomplete.url, //gets set by input/autocomplete view
+		minLength: 2,
+		html: "html"
 	})
-	
-	//@todo This seems convoluted
-	.data("autocomplete")._renderItem = function(ul, item) {
-		switch (item.type) {
-			case 'user':
-			case 'group':
-				r = item.icon + item.name + ' - ' + item.desc;
-				break;
-
-			default:
-				r = item.name + ' - ' + item.desc;
-				break;
-		}
-		
-		return $("<li/>")
-			.data("item.autocomplete", item)
-			.append(r)
-			.appendTo(ul);
-	};
 };
 
 elgg.register_hook_handler('init', 'system', elgg.autocomplete.init);
\ No newline at end of file
diff --git a/vendors/jquery/jquery.ui.autocomplete.html.js b/vendors/jquery/jquery.ui.autocomplete.html.js
new file mode 100644
index 000000000..a3ed2ee4b
--- /dev/null
+++ b/vendors/jquery/jquery.ui.autocomplete.html.js
@@ -0,0 +1,40 @@
+/*
+ * jQuery UI Autocomplete HTML Extension
+ *
+ * Copyright 2010, Scott González (http://scottgonzalez.com)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * http://github.com/scottgonzalez/jquery-ui-extensions
+ */
+(function( $ ) {
+
+var proto = $.ui.autocomplete.prototype,
+	initSource = proto._initSource;
+
+function filter( array, term ) {
+	var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
+	return $.grep( array, function(value) {
+		return matcher.test( $( "<div>" ).html( value.label || value.value || value ).text() );
+	});
+}
+
+$.extend( proto, {
+	_initSource: function() {
+		if ( this.options.html && $.isArray(this.options.source) ) {
+			this.source = function( request, response ) {
+				response( filter( this.options.source, request.term ) );
+			};
+		} else {
+			initSource.call( this );
+		}
+	},
+
+	_renderItem: function( ul, item) {
+		return $( "<li></li>" )
+			.data( "item.autocomplete", item )
+			.append( $( "<a></a>" )[ this.options.html ? "html" : "text" ]( item.label ) )
+			.appendTo( ul );
+	}
+});
+
+})( jQuery );
\ No newline at end of file
diff --git a/views/default/input/autocomplete.php b/views/default/input/autocomplete.php
index 421541e24..e58eb1ae8 100644
--- a/views/default/input/autocomplete.php
+++ b/views/default/input/autocomplete.php
@@ -8,7 +8,7 @@
  * @todo This currently only works for ONE AUTOCOMPLETE TEXT FIELD on a page.
  *
  * @uses $vars['value']       Current value for the text input
- * @uses $vars['match_on']    Array | str What to match on. all|array(groups|users|friends|subtype)
+ * @uses $vars['match_on']    Array | str What to match on. all|array(groups|users|friends)
  * @uses $vars['match_owner'] Bool.  Match only entities that are owned by logged in user.
  * @uses $vars['class']       Additional CSS class
  */
@@ -26,15 +26,19 @@ $defaults = array(
 
 $vars = array_merge($defaults, $vars);
 
-$ac_url_params = http_build_query(array(
-	'match_on' => $vars['match_on'],
-	'match_owner' => $vars['match_owner'],
-));
-
-unset($vars['match_on']);
-unset($vars['match_owner']);
+$params = array();
+if (isset($vars['match_on'])) {
+	$params['match_on'] = $vars['match_on'];
+	unset($vars['match_on']);
+}
+if (isset($vars['match_owner'])) {
+	$params['match_owner'] = $vars['match_owner'];
+	unset($vars['match_owner']);
+}
+$ac_url_params = http_build_query($params);
 
 elgg_load_js('elgg.autocomplete');
+elgg_load_js('jquery.ui.autocomplete.html');
 
 ?>
 
diff --git a/views/default/user/default.php b/views/default/user/default.php
index c0c18f85f..96386c870 100644
--- a/views/default/user/default.php
+++ b/views/default/user/default.php
@@ -9,7 +9,7 @@
 $entity = $vars['entity'];
 $size = elgg_extract('size', $vars, 'tiny');
 
-$icon = elgg_view_entity_icon($entity, $size);
+$icon = elgg_view_entity_icon($entity, $size, $vars);
 
 // Simple XFN
 $rel = '';