using html extension to jquery.ui autocomplete

diff --git a/engine/lib/elgglib.php b/engine/lib/elgglib.php
index 64bdf9276a75c939ebca40e9da9f86a2b19911ee..5c9479f742117a417c0bce02484e50d2b48710f2 100644 (file)
--- 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 127113205f800c540c34b6db62b46d7c75f0623b..e7c3a3d991bd7f7f17a4d9c179025f93bb23ee51 100644 (file)
--- 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 917326d4f7ed757dca656df4508f9d81f5b0b5f6..46d72d14600bf572247affede1c4b9ec65c349c0 100644 (file)
--- 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 (file)
index 0000000..a3ed2ee
--- /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 421541e249139dff71012d2b5a10ee77124e8e34..e58eb1ae818251009c49b8b9a80635a405bb3b22 100644 (file)
--- 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 c0c18f85fb8f30812aeaf9d8622e2345807241cb..96386c8709cb0898a7cb4d105a4f009cd90e8232 100644 (file)
--- 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 = '';