diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2010-02-17 01:56:01 +0000 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2010-02-17 01:56:01 +0000 |
| commit | 5aaae1d695d8bf386c66bb92e2eae7934e04ca4d (patch) | |
| tree | 6bb90140edfff329a01c5c06d69cd8acc10e4290 /demos/autocomplete | |
| parent | 8c1f4da31a5f505269f4e171387cf0f29e1b36d3 (diff) | |
| download | jquery-ui-5aaae1d695d8bf386c66bb92e2eae7934e04ca4d.tar.gz jquery-ui-5aaae1d695d8bf386c66bb92e2eae7934e04ca4d.zip | |
Working categorized autocomplete demo.
Diffstat (limited to 'demos/autocomplete')
| -rw-r--r-- | demos/autocomplete/categories.html | 95 |
1 files changed, 64 insertions, 31 deletions
diff --git a/demos/autocomplete/categories.html b/demos/autocomplete/categories.html index ff1c1510e..cd4c2c05b 100644 --- a/demos/autocomplete/categories.html +++ b/demos/autocomplete/categories.html @@ -13,41 +13,74 @@ </style>
<script type="text/javascript">
+ $.each({
+ prevOf: "previousSibling",
+ nextOf: "nextSibling"
+ }, function( method, traversal ) {
+ $.fn[ method ] = function( selector ) {
+ return this.pushStack( this.map(function() {
+ var ret = this[ traversal ];
+ while ( ret && !$( ret ).is( selector ) ) {
+ ret = ret[ traversal ];
+ }
+ return ret;
+ }) );
+ };
+ });
+
+ $.extend( $.ui.menu.prototype, {
+ next: function() {
+ this.move("next", ".ui-menu-item:first");
+ },
+
+ previous: function() {
+ this.move("prev", ".ui-menu-item:last");
+ },
+
+ move: function(direction, edge) {
+ if (!this.active) {
+ this.activate(this.element.children(edge));
+ return;
+ }
+ var next = this.active[direction + "Of"]('.ui-menu-item');
+ if (next.length) {
+ this.activate(next);
+ } else {
+ this.activate(this.element.children(edge));
+ }
+ }
+ });
+
+ $.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='category'>" + item.category + "</li>" );
+ currentCategory = item.category;
+ }
+ self._renderItem( ul, item );
+ });
+ }
+ });
+ </script>
+ <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"]
- }
+ { label: "anders", category: "" },
+ { label: "andreas", category: "" },
+ { label: "antal", category: "" },
+ { label: "annhhx10", category: "Products" },
+ { label: "annk K12", category: "Products" },
+ { label: "annttop C13", category: "Products" },
+ { label: "anders andersson", category: "People" },
+ { label: "andreas andersson", category: "People" },
+ { label: "andreas johnson", category: "People" }
];
- $.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);
- }
+ source: data
});
});
</script>
@@ -61,7 +94,7 @@ <div class="demo-description">
<p>
- A categorized search result. Currently just static data, will match anything you type.
+ A categorized search result. Try typing "a" or "n".
</p>
</div><!-- End demo-description -->
|