Working categorized autocomplete demo.

diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html
index ff1c1510ed2b4d12afc3ec673e3082ec94e72ab3..cd4c2c05b0a98118a67fa1f6c0f7e7c159e41fe7 100644 (file)
--- a/demos/autocomplete/categories.html
+++ b/demos/autocomplete/categories.html
@@ -13,41 +13,74 @@
        \r
        </style>\r
        <script type="text/javascript">\r
+       $.each({\r
+               prevOf: "previousSibling",\r
+               nextOf: "nextSibling"\r
+       }, function( method, traversal ) {\r
+               $.fn[ method ] = function( selector ) {\r
+                       return this.pushStack( this.map(function() {\r
+                               var ret = this[ traversal ];\r
+                               while ( ret && !$( ret ).is( selector ) ) {\r
+                                       ret = ret[ traversal ];\r
+                               }\r
+                               return ret;\r
+                       }) );\r
+               };\r
+       });\r
+\r
+       $.extend( $.ui.menu.prototype, {\r
+               next: function() {\r
+                       this.move("next", ".ui-menu-item:first");\r
+               },\r
+\r
+               previous: function() {\r
+                       this.move("prev", ".ui-menu-item:last");\r
+               },\r
+\r
+               move: function(direction, edge) {\r
+                       if (!this.active) {\r
+                               this.activate(this.element.children(edge));\r
+                               return;\r
+                       }\r
+                       var next = this.active[direction + "Of"]('.ui-menu-item');\r
+                       if (next.length) {\r
+                               this.activate(next);\r
+                       } else {\r
+                               this.activate(this.element.children(edge));\r
+                       }\r
+               }\r
+       });\r
+\r
+       $.widget("custom.catcomplete", $.ui.autocomplete, {\r
+               _renderMenu: function( ul, items ) {\r
+                       var self = this,\r
+                               currentCategory = "";\r
+                       $.each( items, function( index, item ) {\r
+                               if ( item.category != currentCategory ) {\r
+                                       ul.append( "<li class='category'>" + item.category + "</li>" );\r
+                                       currentCategory = item.category;\r
+                               }\r
+                               self._renderItem( ul, item );\r
+                       });\r
+               }\r
+       });\r
+       </script>\r
+       <script type="text/javascript">\r
        $(function() {\r
                var data = [\r
-                       {\r
-                               items: ["anders", "andreas", "antal"]\r
-                       },\r
-                       {\r
-                               category: "Products",\r
-                               items: ["annhhx10", "annk K12", "annttop C13"]\r
-                       },\r
-                       {\r
-                               category: "People",\r
-                               items: ["anders andersson", "andreas andersson", "andreas johnson"]\r
-                       }\r
+                       { label: "anders", category: "" },\r
+                       { label: "andreas", category: "" },\r
+                       { label: "antal", category: "" },\r
+                       { label: "annhhx10", category: "Products" },\r
+                       { label: "annk K12", category: "Products" },\r
+                       { label: "annttop C13", category: "Products" },\r
+                       { label: "anders andersson", category: "People" },\r
+                       { label: "andreas andersson", category: "People" },\r
+                       { label: "andreas johnson", category: "People" }\r
                ];\r
                \r
-               $.widget("custom.catcomplete", $.ui.autocomplete, {\r
-                       _renderMenu: function( ul, items ) {\r
-                               var self = this;\r
-                               $.each( items, function( index, item ) {\r
-                                       if ( item.category ) {\r
-                                               ul.append( "<li class='category'>" + item.category + "</li>" );\r
-                                       }\r
-                                       $.each( item.items, function( index, item ) {\r
-                                               self._renderItem( ul, {\r
-                                                       label: item\r
-                                               });\r
-                                       });\r
-                               });\r
-                       }\r
-               });\r
-               \r
                $('#search').catcomplete({\r
-                       source: function(request, response) {\r
-                               response(data);\r
-                       }\r
+                       source: data\r
                });\r
        });\r
        </script>\r
@@ -61,7 +94,7 @@
 \r
 <div class="demo-description">\r
 <p>\r
-       A categorized search result. Currently just static data, will match anything you type.\r
+       A categorized search result. Try typing "a" or "n".\r
 </p>\r
 </div><!-- End demo-description -->\r
 \r