Question

enter code hereI am trying to reproduce the search suggestion in facebook. That it shows on the same box results of different ‘types’ with a header (persones, groups, pages, ..)

Basically i need to group the results by type and add a non-cliclable header with the name of the type (example: user, group); Just like facebook does:

This is the custom catcomplete from jquery ui page:

$.widget( "custom.catcomplete", $.ui.autocomplete, {
                                _renderMenu: function( ul, items ) {
                                    var self = this,
                                        currentCategory = "";
                                        $.each( items, function( index, item ) {
                                            if ( item.category != currentCategory ) {
                                                ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                                                currentCategory = item.category;
                                            }
                                            self._renderItem( ul, item );
                                        });
                                }
                            });

-EDIT-

Can be tested here by typing ‘bootcamp’ on the serch field (no need to login): http:// 209.51.221.243/integracion/login.php (type ‘deya’ works, type ‘bootcamp’ doesn’t work

Wich is working fine when is only one type of results, but when there are more than one, like in this response:

[{"value":"Donde puedo descargar los drivers de bootcamp?","id":"1","category":"Ayudas"}][{"value":"Donde puedo descargar los drivers de bootcamp?","id":"1","category":"Ayudas"},{"first_name":"bootcamp","last_name":"bootcamp","id":"95","value":"bootcamp bootcamp","category":"Usuarios"}]

it doesn’t show any ressult, why?

Answer 1

In your php only add the sub, for the 1st row of each type.
You can do that with a global variable:

$first = array();

while (...) {
   if (!$first[$row['type']]) {
       $first[$row['type']] = true;
       $row['sub'] = $row['type'];
   }
}

then in your javascript:

.data( "autocomplete" )._renderItem = function( ul, item ) {
            var sub = "";
            if (item.sub) {
                sub = $("<li class="sub">" + item.sub + "</li>");
                ul.append(li);
            }
            var li = $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a><img src='"+item.img+"' /><span class='name'>" + item.value + "</span></a>" )
            ul.append(li);
                        };