Fix for #5188 along with a half-functional demo (buggy keyboard navig…

…ation)
jquery · Feb 16, 2010 · 4f47150 · 4f47150
1 parent e6ccefe
commit 4f47150
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 3 deletions.
diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+	<title>jQuery UI Autocomplete Custom Data Demo</title>
+	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
+	<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
+	<link type="text/css" href="../demos.css" rel="stylesheet" />
+	<style type="text/css">
+
+	</style>
+	<script type="text/javascript">
+	$(function() {
+		var data = [
+			{
+				items: ["anders", "andreas", "antal"]
+			},
+			{
+				category: "Products",
+				items: ["annhhx10", "annk K12", "annttop C13"]
+			},
+			{
+				category: "People",
+				items: ["anders andersson", "andreas andersson", "andreas johnson"]
+			}
+		];
+
+		$.widget("custom.catcomplete", $.ui.autocomplete, {
+			_renderMenu: function( ul, items ) {
+				var self = this;
+				$.each( items, function( index, item ) {
+					if ( item.category ) {
+						ul.append( "<li class='category'>" + item.category + "</li>" );
+					}
+					$.each( item.items, function( index, item ) {
+						self._renderItem( ul, {
+							label: item
+						});
+					});
+				});
+			}
+		});
+
+		$('#search').catcomplete({
+			source: function(request, response) {
+				response(data);
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+	<label for="search">Search: </label>
+	<input id="search" />
+</div><!-- End demo -->
+
+<div class="demo-description">
+<p>
+	A categorized search result. Currently just static data, will match anything you type.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/ui/jquery.ui.autocomplete.js b/ui/jquery.ui.autocomplete.js
@@ -237,9 +237,7 @@ $.widget( "ui.autocomplete", {
 	_suggest: function( items ) {
 		var self = this,
 			ul = this.menu.element.empty();
-		$.each( items, function( index, item ) {
-			self._renderItem( ul, item );
-		});
+		this._renderMenu( ul, items );
 		// TODO refresh should check if the active item is still in the dom, removing the need for a manual deactivate
 		this.menu.deactivate();
 		this.menu.refresh();
@@ -248,6 +246,13 @@ $.widget( "ui.autocomplete", {
 			ul.width( this.element.width() );
 		}
 	},
+
+	_renderMenu: function( ul, items ) {
+		var self = this;
+		$.each( items, function( index, item ) {
+			self._renderItem( ul, item );
+		});
+	},
 
 	_renderItem: function( ul, item) {
 		return $( "<li></li>" )