jquery / jquery-ui

Source
Commits
Network (26)
Graphs
Tree: 8d87d06

The official jQuery user interface library. — Read more

This URL has Read+Write access

eol-style and mime-type

rdworth (author)

Wed Mar 17 16:42:32 -0700 2010

commit 8d87d067584c415794a4be83bc3a11f2ade2162b
tree a87f6ce149f438ed54c51278a13b7b9e81b4c343
parent 2725bf3e2fd785fde9fca7c13d0ddad759e31a6c

M	demos/autocomplete/categories.html	188 ••••
M	demos/autocomplete/xml.html	138 ••••

demos/autocomplete/categories.html

0
@@ -1,94 +1,94 @@
0-<!DOCTYPE html>
0-<html lang="en">
0-<head>
0-  <meta charset="UTF-8" />
0-  <title>jQuery UI Autocomplete Custom Data Demo</title>
0-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
0-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
0-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
0-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
0-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
0-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
0-  <link type="text/css" href="../demos.css" rel="stylesheet" />
0-  <style type="text/css">
0-  .ui-autocomplete-category {
0-    font-weight:bold;
0-    padding:.2em .4em;
0-    margin:.8em 0 .2em;
0-    line-height:1.5;
0-  }
0-  </style>
0-  <script type="text/javascript">
0-  $.extend( $.ui.menu.prototype, {
0-    next: function() {
0-      this.move("next", ".ui-menu-item:first");
0-    },
0-
0-    previous: function() {
0-      this.move("prev", ".ui-menu-item:last");
0-    },
0-
0-    move: function(direction, edge) {
0-      if (!this.active) {
0-        this.activate(this.element.children(edge));
0-        return;
0-      }
0-      var next = this.active[direction + "All"]('.ui-menu-item').eq( 0 );
0-      if (next.length) {
0-        this.activate(next);
0-      } else {
0-        this.activate(this.element.children(edge));
0-      }
0-    }
0-  });
0-
0-  $.widget("custom.catcomplete", $.ui.autocomplete, {
0-    _renderMenu: function( ul, items ) {
0-      var self = this,
0-        currentCategory = "";
0-      $.each( items, function( index, item ) {
0-        if ( item.category != currentCategory ) {
0-          ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
0-          currentCategory = item.category;
0-        }
0-        self._renderItem( ul, item );
0-      });
0-    }
0-  });
0-  </script>
0-  <script type="text/javascript">
0-  $(function() {
0-    var data = [
0-      { label: "anders", category: "" },
0-      { label: "andreas", category: "" },
0-      { label: "antal", category: "" },
0-      { label: "annhhx10", category: "Products" },
0-      { label: "annk K12", category: "Products" },
0-      { label: "annttop C13", category: "Products" },
0-      { label: "anders andersson", category: "People" },
0-      { label: "andreas andersson", category: "People" },
0-      { label: "andreas johnson", category: "People" }
0-    ];
0-    
0-    $('#search').catcomplete({
0-      delay: 0,
0-      source: data
0-    });
0-  });
0-  </script>
0-</head>
0-<body>
0-
0-<div class="demo">
0-  <label for="search">Search: </label>
0-  <input id="search" />
0-</div><!-- End demo -->
0-
0-<div class="demo-description">
0-<p>
0-  A categorized search result. Try typing "a" or "n".
0-</p>
0-</div><!-- End demo-description -->
0-
0-</body>
0-</html>
0
+<!DOCTYPE html>
0
+<html lang="en">
0
+<head>
0
+  <meta charset="UTF-8" />
0
+  <title>jQuery UI Autocomplete Custom Data Demo</title>
0
+  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
0
+  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
0
+  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
0
+  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
0
+  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
0
+  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
0
+  <link type="text/css" href="../demos.css" rel="stylesheet" />
0
+  <style type="text/css">
0
+  .ui-autocomplete-category {
0
+    font-weight:bold;
0
+    padding:.2em .4em;
0
+    margin:.8em 0 .2em;
0
+    line-height:1.5;
0
+  }
0
+  </style>
0
+  <script type="text/javascript">
0
+  $.extend( $.ui.menu.prototype, {
0
+    next: function() {
0
+      this.move("next", ".ui-menu-item:first");
0
+    },
0
+
0
+    previous: function() {
0
+      this.move("prev", ".ui-menu-item:last");
0
+    },
0
+
0
+    move: function(direction, edge) {
0
+      if (!this.active) {
0
+        this.activate(this.element.children(edge));
0
+        return;
0
+      }
0
+      var next = this.active[direction + "All"]('.ui-menu-item').eq( 0 );
0
+      if (next.length) {
0
+        this.activate(next);
0
+      } else {
0
+        this.activate(this.element.children(edge));
0
+      }
0
+    }
0
+  });
0
+
0
+  $.widget("custom.catcomplete", $.ui.autocomplete, {
0
+    _renderMenu: function( ul, items ) {
0
+      var self = this,
0
+        currentCategory = "";
0
+      $.each( items, function( index, item ) {
0
+        if ( item.category != currentCategory ) {
0
+          ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
0
+          currentCategory = item.category;
0
+        }
0
+        self._renderItem( ul, item );
0
+      });
0
+    }
0
+  });
0
+  </script>
0
+  <script type="text/javascript">
0
+  $(function() {
0
+    var data = [
0
+      { label: "anders", category: "" },
0
+      { label: "andreas", category: "" },
0
+      { label: "antal", category: "" },
0
+      { label: "annhhx10", category: "Products" },
0
+      { label: "annk K12", category: "Products" },
0
+      { label: "annttop C13", category: "Products" },
0
+      { label: "anders andersson", category: "People" },
0
+      { label: "andreas andersson", category: "People" },
0
+      { label: "andreas johnson", category: "People" }
0
+    ];
0
+    
0
+    $('#search').catcomplete({
0
+      delay: 0,
0
+      source: data
0
+    });
0
+  });
0
+  </script>
0
+</head>
0
+<body>
0
+
0
+<div class="demo">
0
+  <label for="search">Search: </label>
0
+  <input id="search" />
0
+</div><!-- End demo -->
0
+
0
+<div class="demo-description">
0
+<p>
0
+  A categorized search result. Try typing "a" or "n".
0
+</p>
0
+</div><!-- End demo-description -->
0
+
0
+</body>
0
+</html>

demos/autocomplete/xml.html

0
@@ -1,69 +1,69 @@
0-<!DOCTYPE html>
0-<html lang="en">
0-<head>
0-  <meta charset="UTF-8" />
0-  <title>jQuery UI Autocomplete Remote datasource demo</title>
0-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
0-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
0-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
0-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
0-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
0-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
0-  <link type="text/css" href="../demos.css" rel="stylesheet" />
0-  <script type="text/javascript">
0-  $(function() {
0-    function log(message) {
0-      $("<div/>").text(message).prependTo("#log");
0-      $("#log").attr("scrollTop", 0);
0-    }
0-    
0-    $.ajax({
0-      url: "london.xml",
0-      dataType: "xml",
0-      success: function(xmlResponse) {
0-        var data = $("geoname", xmlResponse).map(function() {
0-          return {
0-            value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"),
0-            id: $("geonameId", this).text()
0-          };
0-        }).get();
0-        $("#birds").autocomplete({
0-          source: data,
0-          minLength: 0,
0-          select: function(event, ui) {
0-            log(ui.item ? ("Selected: " + ui.item.value + ", geonameId: " + ui.item.id) : "Nothing selected, input was " + this.value);
0-          }
0-        });
0-      }
0-    })
0-    
0-  });
0-  </script>
0-</head>
0-<body>
0-
0-<div class="demo">
0-
0-<div class="ui-widget">
0-  <label for="birds">London matches: </label>
0-  <input id="birds" />
0-</div>
0-
0-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
0-  Result:
0-  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
0-</div>
0-
0-</div><!-- End demo -->
0-
0-<div class="demo-description">
0-<p>
0-This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.
0-</p>
0-<p>
0-This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.
0-</p>
0-</div><!-- End demo-description -->
0-
0-</body>
0-</html>
0
+<!DOCTYPE html>
0
+<html lang="en">
0
+<head>
0
+  <meta charset="UTF-8" />
0
+  <title>jQuery UI Autocomplete Remote datasource demo</title>
0
+  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
0
+  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
0
+  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
0
+  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
0
+  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
0
+  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
0
+  <link type="text/css" href="../demos.css" rel="stylesheet" />
0
+  <script type="text/javascript">
0
+  $(function() {
0
+    function log(message) {
0
+      $("<div/>").text(message).prependTo("#log");
0
+      $("#log").attr("scrollTop", 0);
0
+    }
0
+    
0
+    $.ajax({
0
+      url: "london.xml",
0
+      dataType: "xml",
0
+      success: function(xmlResponse) {
0
+        var data = $("geoname", xmlResponse).map(function() {
0
+          return {
0
+            value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"),
0
+            id: $("geonameId", this).text()
0
+          };
0
+        }).get();
0
+        $("#birds").autocomplete({
0
+          source: data,
0
+          minLength: 0,
0
+          select: function(event, ui) {
0
+            log(ui.item ? ("Selected: " + ui.item.value + ", geonameId: " + ui.item.id) : "Nothing selected, input was " + this.value);
0
+          }
0
+        });
0
+      }
0
+    })
0
+    
0
+  });
0
+  </script>
0
+</head>
0
+<body>
0
+
0
+<div class="demo">
0
+
0
+<div class="ui-widget">
0
+  <label for="birds">London matches: </label>
0
+  <input id="birds" />
0
+</div>
0
+
0
+<div class="ui-widget" style="margin-top:2em; font-family:Arial">
0
+  Result:
0
+  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
0
+</div>
0
+
0
+</div><!-- End demo -->
0
+
0
+<div class="demo-description">
0
+<p>
0
+This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.
0
+</p>
0
+<p>
0
+This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.
0
+</p>
0
+</div><!-- End demo-description -->
0
+
0
+</body>
0
+</html>

Comments

Please log in to comment.