github github
  • Home
  • Pricing and Signup
  • Training
  • Gist
  • Blog
  • Login

jquery / jquery-ui

  • Admin
  • Watch Unwatch
  • Fork
  • Your Fork
  • Pull Request
  • Download Source
    • 1,005
    • 240
  • Source
  • Commits
  • Network (240)
  • Graphs
  • Tree: df932bb

click here to add a description

click here to add a homepage

  • Switch Branches (8)
    • bind
    • devpreview
    • formcontrols
    • master
    • menu
    • panel
    • tooltip
    • widget-super
  • Switch Tags (22)
    • 1.9m2
    • 1.9m1
    • 1.8rc3
    • 1.8rc2
    • 1.8rc1
    • 1.8b1
    • 1.8a2
    • 1.8a1
    • 1.8.5
    • 1.8.4
    • 1.8.3
    • 1.8.2
    • 1.8.1
    • 1.8
    • 1.7
    • 1.6rc6
    • 1.6rc5
    • 1.6rc3
    • 1.6rc2
    • 1.6
    • 1.5.2
    • 1.5.1
  • Comments
  • Contributors
Sending Request…

The official jQuery user interface library. — Read more

  Cancel

http://jqueryui.com/

  Cancel
  • HTTP
  • Git Read-Only

This URL has Read+Write access

Autocomplete demos: Coding standards.
scottgonzalez (author)
Thu Sep 09 19:24:52 -0700 2010
commit  df932bbba35be7f2e6f7
tree    967ba449667ca5ac5427
parent  83244d933c481c6abdb2
M demos/autocomplete/categories.html 40 ••••
M demos/autocomplete/combobox.html 50 ••••
M demos/autocomplete/custom-data.html 74 ••••
M demos/autocomplete/default.html 55 ••••
M demos/autocomplete/folding.html 34 ••••
M demos/autocomplete/index.html 4 ••••
M demos/autocomplete/maxheight.html 53 ••••
M demos/autocomplete/multiple-remote.html 60 ••••
M demos/autocomplete/multiple.html 76 ••••
M demos/autocomplete/remote-jsonp.html 65 ••••
M demos/autocomplete/remote-with-cache.html 32 ••••
M demos/autocomplete/remote.html 46 ••••
M demos/autocomplete/xml.html 58 ••••
Txt demos/autocomplete/categories.html
  • View file @ df932bb
... ...
@@ -1,25 +1,25 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8">
5 5
   <title>jQuery UI Autocomplete Custom Data Demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <style type="text/css">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <style>
14 14
   .ui-autocomplete-category {
15  
-    font-weight:bold;
16  
-    padding:.2em .4em;
17  
-    margin:.8em 0 .2em;
18  
-    line-height:1.5;
  15
+    font-weight: bold;
  16
+    padding: .2em .4em;
  17
+    margin: .8em 0 .2em;
  18
+    line-height: 1.5;
19 19
   }
20 20
   </style>
21  
-  <script type="text/javascript">
22  
-  $.widget("custom.catcomplete", $.ui.autocomplete, {
  21
+  <script>
  22
+  $.widget( "custom.catcomplete", $.ui.autocomplete, {
23 23
     _renderMenu: function( ul, items ) {
24 24
       var self = this,
25 25
         currentCategory = "";
... ...
@@ -33,7 +33,7 @@
33 33
     }
34 34
   });
35 35
   </script>
36  
-  <script type="text/javascript">
  36
+  <script>
37 37
   $(function() {
38 38
     var data = [
39 39
       { label: "anders", category: "" },
... ...
@@ -47,7 +47,7 @@
47 47
       { label: "andreas johnson", category: "People" }
48 48
     ];
49 49
     
50  
-    $('#search').catcomplete({
  50
+    $( "#search" ).catcomplete({
51 51
       delay: 0,
52 52
       source: data
53 53
     });
... ...
@@ -61,10 +61,10 @@
61 61
   <input id="search" />
62 62
 </div><!-- End demo -->
63 63
 
  64
+
  65
+
64 66
 <div class="demo-description">
65  
-<p>
66  
-  A categorized search result. Try typing "a" or "n".
67  
-</p>
  67
+<p>A categorized search result. Try typing "a" or "n".</p>
68 68
 </div><!-- End demo-description -->
69 69
 
70 70
 </body>
Txt demos/autocomplete/combobox.html
  • View file @ df932bb
... ...
@@ -1,27 +1,27 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete Combobox Demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
12  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
13  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
14  
-  <style type="text/css">
15  
-    .ui-button { margin-left: -1px; }
16  
-    .ui-button-icon-only .ui-button-text { padding: 0.35em; } 
17  
-    .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.button.js"></script>
  11
+  <script src="../../ui/jquery.ui.position.js"></script>
  12
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  13
+  <link rel="stylesheet" href="../demos.css">
  14
+  <style>
  15
+  .ui-button { margin-left: -1px; }
  16
+  .ui-button-icon-only .ui-button-text { padding: 0.35em; } 
  17
+  .ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; }
18 18
   </style>
19  
-  <script type="text/javascript">
  19
+  <script>
20 20
   (function( $ ) {
21 21
     $.widget( "ui.combobox", {
22 22
       _create: function() {
23  
-        var self = this;
24  
-        var select = this.element.hide(),
  23
+        var self = this,
  24
+          select = this.element.hide(),
25 25
           selected = select.children( ":selected" ),
26 26
           value = selected.val() ? selected.text() : "";
27 27
         var input = $( "<input>" )
... ...
@@ -106,12 +106,12 @@
106 106
           });
107 107
       }
108 108
     });
109  
-  })(jQuery);
  109
+  })( jQuery );
110 110
 
111 111
   $(function() {
112  
-    $("#combobox").combobox();
113  
-    $("#toggle").click(function() {
114  
-      $("#combobox").toggle();
  112
+    $( "#combobox" ).combobox();
  113
+    $( "#toggle" ).click(function() {
  114
+      $( "#combobox" ).toggle();
115 115
     });
116 116
   });
117 117
   </script>
... ...
@@ -152,13 +152,11 @@
152 152
 
153 153
 </div><!-- End demo -->
154 154
 
  155
+
  156
+
155 157
 <div class="demo-description">
156  
-<p>
157  
-A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.
158  
-</p>
159  
-<p>
160  
-The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.
161  
-</p>
  158
+<p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p>
  159
+<p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
162 160
 </div><!-- End demo-description -->
163 161
 
164 162
 </body>
Txt demos/autocomplete/custom-data.html
  • View file @ df932bb
... ...
@@ -1,16 +1,16 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete Custom Data Demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <style type="text/css">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <style>
14 14
   #project-label {
15 15
     display: block;
16 16
     font-weight: bold;
... ...
@@ -26,42 +26,42 @@
26 26
     padding: 0;
27 27
   }
28 28
   </style>
29  
-  <script type="text/javascript">
  29
+  <script>
30 30
   $(function() {
31 31
     var projects = [
32 32
       {
33  
-        value: 'jquery',
34  
-        label: 'jQuery',
35  
-        desc: 'the write less, do more, JavaScript library',
36  
-        icon: 'jquery_32x32.png'
  33
+        value: "jquery",
  34
+        label: "jQuery",
  35
+        desc: "the write less, do more, JavaScript library",
  36
+        icon: "jquery_32x32.png"
37 37
       },
38 38
       {
39  
-        value: 'jquery-ui',
40  
-        label: 'jQuery UI',
41  
-        desc: 'the official user interface library for jQuery',
42  
-        icon: 'jqueryui_32x32.png'
  39
+        value: "jquery-ui",
  40
+        label: "jQuery UI",
  41
+        desc: "the official user interface library for jQuery",
  42
+        icon: "jqueryui_32x32.png"
43 43
       },
44 44
       {
45  
-        value: 'sizzlejs',
46  
-        label: 'Sizzle JS',
47  
-        desc: 'a pure-JavaScript CSS selector engine',
48  
-        icon: 'sizzlejs_32x32.png'
  45
+        value: "sizzlejs",
  46
+        label: "Sizzle JS",
  47
+        desc: "a pure-JavaScript CSS selector engine",
  48
+        icon: "sizzlejs_32x32.png"
49 49
       }
50 50
     ];
51  
-    
52  
-    $('#project').autocomplete({
  51
+
  52
+    $( "#project" ).autocomplete({
53 53
       minLength: 0,
54 54
       source: projects,
55  
-      focus: function(event, ui) {
56  
-        $('#project').val(ui.item.label);
  55
+      focus: function( event, ui ) {
  56
+        $( "#project" ).val( ui.item.label );
57 57
         return false;
58 58
       },
59  
-      select: function(event, ui) {
60  
-        $('#project').val(ui.item.label);
61  
-        $('#project-id').val(ui.item.value);
62  
-        $('#project-description').html(ui.item.desc);
63  
-        $('#project-icon').attr('src', 'images/' + ui.item.icon);
64  
-        
  59
+      select: function( event, ui ) {
  60
+        $( "#project" ).val( ui.item.label );
  61
+        $( "#project-id" ).val( ui.item.value );
  62
+        $( "#project-description" ).html( ui.item.desc );
  63
+        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
  64
+
65 65
         return false;
66 66
       }
67 67
     })
... ...
@@ -84,13 +84,11 @@
84 84
   <p id="project-description"></p>
85 85
 </div><!-- End demo -->
86 86
 
  87
+
  88
+
87 89
 <div class="demo-description">
88  
-<p>
89  
-You can use your own custom data formats and displays by simply overriding the default focus and select actions.
90  
-</p>
91  
-<p>
92  
-Try typing "j" to get a list of projects or just press the down arrow.
93  
-</p>
  90
+<p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p>
  91
+<p>Try typing "j" to get a list of projects or just press the down arrow.</p>
94 92
 </div><!-- End demo-description -->
95 93
 
96 94
 </body>
Txt demos/autocomplete/default.html
  • View file @ df932bb
... ...
@@ -1,19 +1,42 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete Default Demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <script type="text/javascript">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <script>
14 14
   $(function() {
15  
-    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
16  
-    $("#tags").autocomplete({
  15
+    var availableTags = [
  16
+      "ActionScript",
  17
+      "AppleScript",
  18
+      "Asp",
  19
+      "BASIC",
  20
+      "C",
  21
+      "C++",
  22
+      "Clojure",
  23
+      "COBOL",
  24
+      "ColdFusion",
  25
+      "Erlang",
  26
+      "Fortran",
  27
+      "Groovy",
  28
+      "Haskell",
  29
+      "Java",
  30
+      "JavaScript",
  31
+      "Lisp",
  32
+      "Perl",
  33
+      "PHP",
  34
+      "Python",
  35
+      "Ruby",
  36
+      "Scala",
  37
+      "Scheme"
  38
+    ];
  39
+    $( "#tags" ).autocomplete({
17 40
       source: availableTags
18 41
     });
19 42
   });
... ...
@@ -30,13 +53,11 @@
30 53
 
31 54
 </div><!-- End demo -->
32 55
 
  56
+
  57
+
33 58
 <div class="demo-description">
34  
-<p>
35  
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.
36  
-</p>
37  
-<p>
38  
-The datasource is a simple JavaScript array, provided to the widget using the source-option.
39  
-</p>
  59
+<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
  60
+<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
40 61
 </div><!-- End demo-description -->
41 62
 
42 63
 </body>
Txt demos/autocomplete/folding.html
  • View file @ df932bb
... ...
@@ -1,25 +1,25 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete Accent Folding Demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <script type="text/javascript">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <script>
14 14
   $(function() {
15 15
     var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
16 16
 
17 17
     var accentMap = {
18  
-      'á':'a',
19  
-      'ö':'o'
  18
+      "á": "a",
  19
+      "ö": "o"
20 20
     };
21 21
     var normalize = function( term ) {
22  
-      var ret = '';
  22
+      var ret = "";
23 23
       for ( var i = 0; i < term.length; i++ ) {
24 24
         ret += accentMap[ term.charAt(i) ] || term.charAt(i);
25 25
       }
... ...
@@ -51,13 +51,11 @@
51 51
 
52 52
 </div><!-- End demo -->
53 53
 
  54
+
  55
+
54 56
 <div class="demo-description">
55  
-<p>
56  
-The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.
57  
-</p>
58  
-<p>
59  
-Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".
60  
-</p>
  57
+<p>The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.</p>
  58
+<p>Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".</p>
61 59
 </div><!-- End demo-description -->
62 60
 
63 61
 </body>
Txt demos/autocomplete/index.html
  • View file @ df932bb
... ...
@@ -1,9 +1,9 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete Demos</title>
6  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
  6
+  <link rel="stylesheet" href="../demos.css">
7 7
 </head>
8 8
 <body>
9 9
   <div class="demos-nav">
Txt demos/autocomplete/maxheight.html
  • View file @ df932bb
... ...
@@ -1,16 +1,16 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete Scrollable Results Demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <style type="text/css">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <style>
14 14
   .ui-autocomplete {
15 15
     max-height: 100px;
16 16
     overflow-y: auto;
... ...
@@ -22,10 +22,33 @@
22 22
     height: 100px;
23 23
   }
24 24
   </style>
25  
-  <script type="text/javascript">
  25
+  <script>
26 26
   $(function() {
27  
-    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
28  
-    $("#tags").autocomplete({
  27
+    var availableTags = [
  28
+      "ActionScript",
  29
+      "AppleScript",
  30
+      "Asp",
  31
+      "BASIC",
  32
+      "C",
  33
+      "C++",
  34
+      "Clojure",
  35
+      "COBOL",
  36
+      "ColdFusion",
  37
+      "Erlang",
  38
+      "Fortran",
  39
+      "Groovy",
  40
+      "Haskell",
  41
+      "Java",
  42
+      "JavaScript",
  43
+      "Lisp",
  44
+      "Perl",
  45
+      "PHP",
  46
+      "Python",
  47
+      "Ruby",
  48
+      "Scala",
  49
+      "Scheme"
  50
+    ];
  51
+    $( "#tags" ).autocomplete({
29 52
       source: availableTags
30 53
     });
31 54
   });
... ...
@@ -42,10 +65,10 @@
42 65
 
43 66
 </div><!-- End demo -->
44 67
 
  68
+
  69
+
45 70
 <div class="demo-description">
46  
-<p>
47  
-When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.
48  
-</p>
  71
+<p>When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.</p>
49 72
 </div><!-- End demo-description -->
50 73
 
51 74
 </body>
Txt demos/autocomplete/multiple-remote.html
  • View file @ df932bb
... ...
@@ -1,37 +1,37 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8">
5 5
   <title>jQuery UI Autocomplete multiple demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <style type="text/css">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <style>
14 14
   .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
15 15
   </style>
16  
-  <script type="text/javascript">
  16
+  <script>
17 17
   $(function() {
18  
-    function split(val) {
19  
-      return val.split(/,\s*/);
  18
+    function split( val ) {
  19
+      return val.split( /,\s*/ );
20 20
     }
21  
-    function extractLast(term) {
22  
-      return split(term).pop();
  21
+    function extractLast( term ) {
  22
+      return split( term ).pop();
23 23
     }
24  
-    
25  
-    $("#birds").autocomplete({
26  
-      source: function(request, response) {
27  
-        $.getJSON("search.php", {
28  
-          term: extractLast(request.term)
29  
-        }, response);
  24
+
  25
+    $( "#birds" ).autocomplete({
  26
+      source: function( request, response ) {
  27
+        $.getJSON( "search.php", {
  28
+          term: extractLast( request.term )
  29
+        }, response );
30 30
       },
31 31
       search: function() {
32 32
         // custom minLength
33  
-        var term = extractLast(this.value);
34  
-        if (term.length < 2) {
  33
+        var term = extractLast( this.value );
  34
+        if ( term.length < 2 ) {
35 35
           return false;
36 36
         }
37 37
       },
... ...
@@ -39,15 +39,15 @@
39 39
         // prevent value inserted on focus
40 40
         return false;
41 41
       },
42  
-      select: function(event, ui) {
  42
+      select: function( event, ui ) {
43 43
         var terms = split( this.value );
44 44
         // remove the current input
45 45
         terms.pop();
46 46
         // add the selected item
47 47
         terms.push( ui.item.value );
48 48
         // add placeholder to get the comma-and-space at the end
49  
-        terms.push("");
50  
-        this.value = terms.join(", ");
  49
+        terms.push( "" );
  50
+        this.value = terms.join( ", " );
51 51
         return false;
52 52
       }
53 53
     });
... ...
@@ -65,13 +65,11 @@
65 65
 
66 66
 </div><!-- End demo -->
67 67
 
  68
+
  69
+
68 70
 <div class="demo-description">
69  
-<p>
70  
-Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.
71  
-</p>
72  
-<p>
73  
-This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.
74  
-</p>
  71
+<p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p>
  72
+<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
75 73
 </div><!-- End demo-description -->
76 74
 
77 75
 </body>
Txt demos/autocomplete/multiple.html
  • View file @ df932bb
... ...
@@ -1,44 +1,68 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete multiple demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <script type="text/javascript">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <script>
14 14
   $(function() {
15  
-    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
16  
-    function split(val) {
17  
-      return val.split(/,\s*/);
  15
+    var availableTags = [
  16
+      "ActionScript",
  17
+      "AppleScript",
  18
+      "Asp",
  19
+      "BASIC",
  20
+      "C",
  21
+      "C++",
  22
+      "Clojure",
  23
+      "COBOL",
  24
+      "ColdFusion",
  25
+      "Erlang",
  26
+      "Fortran",
  27
+      "Groovy",
  28
+      "Haskell",
  29
+      "Java",
  30
+      "JavaScript",
  31
+      "Lisp",
  32
+      "Perl",
  33
+      "PHP",
  34
+      "Python",
  35
+      "Ruby",
  36
+      "Scala",
  37
+      "Scheme"
  38
+    ];
  39
+    function split( val ) {
  40
+      return val.split( /,\s*/ );
18 41
     }
19  
-    function extractLast(term) {
20  
-      return split(term).pop();
  42
+    function extractLast( term ) {
  43
+      return split( term ).pop();
21 44
     }
22  
-    
23  
-    $("#tags").autocomplete({
  45
+
  46
+    $( "#tags" ).autocomplete({
24 47
       minLength: 0,
25  
-      source: function(request, response) {
  48
+      source: function( request, response ) {
26 49
         // delegate back to autocomplete, but extract the last term
27  
-        response($.ui.autocomplete.filter(availableTags, extractLast(request.term)));
  50
+        response( $.ui.autocomplete.filter(
  51
+          availableTags, extractLast( request.term ) ) );
28 52
       },
29 53
       focus: function() {
30 54
         // prevent value inserted on focus
31 55
         return false;
32 56
       },
33  
-      select: function(event, ui) {
  57
+      select: function( event, ui ) {
34 58
         var terms = split( this.value );
35 59
         // remove the current input
36 60
         terms.pop();
37 61
         // add the selected item
38 62
         terms.push( ui.item.value );
39 63
         // add placeholder to get the comma-and-space at the end
40  
-        terms.push("");
41  
-        this.value = terms.join(", ");
  64
+        terms.push( "" );
  65
+        this.value = terms.join( ", " );
42 66
         return false;
43 67
       }
44 68
     });
... ...
@@ -56,13 +80,11 @@
56 80
 
57 81
 </div><!-- End demo -->
58 82
 
  83
+
  84
+
59 85
 <div class="demo-description">
60  
-<p>
61  
-Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.
62  
-</p>
63  
-<p>
64  
-This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.
65  
-</p>
  86
+<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
  87
+<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
66 88
 </div><!-- End demo-description -->
67 89
 
68 90
 </body>
Txt demos/autocomplete/remote-jsonp.html
  • View file @ df932bb
... ...
@@ -1,27 +1,28 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete Remote JSONP datasource demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <style type="text/css">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <style>
14 14
   .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
  15
+  #city { width: 25em; }
15 16
   </style>
16  
-  <script type="text/javascript">
  17
+  <script>
17 18
   $(function() {
18  
-    function log(message) {
19  
-      $("<div/>").text(message).prependTo("#log");
20  
-      $("#log").attr("scrollTop", 0);
  19
+    function log( message ) {
  20
+      $( "<div/>" ).text( message ).prependTo( "#log" );
  21
+      $( "#log" ).attr( "scrollTop", 0 );
21 22
     }
22  
-    
23  
-    $("#city").autocomplete({
24  
-      source: function(request, response) {
  23
+
  24
+    $( "#city" ).autocomplete({
  25
+      source: function( request, response ) {
25 26
         $.ajax({
26 27
           url: "http://ws.geonames.org/searchJSON",
27 28
           dataType: "jsonp",
... ...
@@ -31,33 +32,31 @@
31 32
             maxRows: 12,
32 33
             name_startsWith: request.term
33 34
           },
34  
-          success: function(data) {
35  
-            response($.map(data.geonames, function(item) {
  35
+          success: function( data ) {
  36
+            response( $.map( data.geonames, function( item ) {
36 37
               return {
37 38
                 label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
38 39
                 value: item.name
39 40
               }
40  
-            }))
  41
+            }));
41 42
           }
42  
-        })
  43
+        });
43 44
       },
44 45
       minLength: 2,
45  
-      select: function(event, ui) {
46  
-        log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value);
  46
+      select: function( event, ui ) {
  47
+        log( ui.item ?
  48
+          "Selected: " + ui.item.label :
  49
+          "Nothing selected, input was " + this.value);
47 50
       },
48 51
       open: function() {
49  
-        $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
  52
+        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
50 53
       },
51 54
       close: function() {
52  
-        $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
  55
+        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
53 56
       }
54 57
     });
55 58
   });
56 59
   </script>
57  
-  <style>
58  
-    .ui-autocomplete-loading { background: url(indicator.gif) no-repeat right; }
59  
-    #city { width: 25em; }
60  
-  </style>
61 60
 </head>
62 61
 <body>
63 62
 
... ...
@@ -76,13 +75,11 @@
76 75
 
77 76
 </div><!-- End demo -->
78 77
 
  78
+
  79
+
79 80
 <div class="demo-description">
80  
-<p>
81  
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.
82  
-</p>
83  
-<p>
84  
-In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input. 
85  
-</p>
  81
+<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
  82
+<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
86 83
 </div><!-- End demo-description -->
87 84
 
88 85
 </body>
Txt demos/autocomplete/remote-with-cache.html
  • View file @ df932bb
... ...
@@ -1,25 +1,25 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete Remote with caching demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <style type="text/css">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <style>
14 14
   .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
15 15
   </style>
16  
-  <script type="text/javascript">
  16
+  <script>
17 17
   $(function() {
18 18
     var cache = {},
19 19
       lastXhr;
20 20
     $( "#birds" ).autocomplete({
21 21
       minLength: 2,
22  
-      source: function(request, response) {
  22
+      source: function( request, response ) {
23 23
         var term = request.term;
24 24
         if ( term in cache ) {
25 25
           response( cache[ term ] );
... ...
@@ -48,13 +48,11 @@
48 48
 
49 49
 </div><!-- End demo -->
50 50
 
  51
+
  52
+
51 53
 <div class="demo-description">
52  
-<p>
53  
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.
54  
-</p>
55  
-<p>
56  
-Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.
57  
-</p>
  54
+<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
  55
+<p>Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.</p>
58 56
 </div><!-- End demo-description -->
59 57
 
60 58
 </body>
Txt demos/autocomplete/remote.html
  • View file @ df932bb
... ...
@@ -1,30 +1,32 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete Remote datasource demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <style type="text/css">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <style>
14 14
   .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
15 15
   </style>
16  
-  <script type="text/javascript">
  16
+  <script>
17 17
   $(function() {
18  
-    function log(message) {
19  
-      $("<div/>").text(message).prependTo("#log");
20  
-      $("#log").attr("scrollTop", 0);
  18
+    function log( message ) {
  19
+      $( "<div/>" ).text( message ).prependTo( "#log" );
  20
+      $( "#log" ).attr( "scrollTop", 0 );
21 21
     }
22  
-    
23  
-    $("#birds").autocomplete({
  22
+
  23
+    $( "#birds" ).autocomplete({
24 24
       source: "search.php",
25 25
       minLength: 2,
26  
-      select: function(event, ui) {
27  
-        log(ui.item ? ("Selected: " + ui.item.value + " aka " + ui.item.id) : "Nothing selected, input was " + this.value);
  26
+      select: function( event, ui ) {
  27
+        log( ui.item ?
  28
+          "Selected: " + ui.item.value + " aka " + ui.item.id :
  29
+          "Nothing selected, input was " + this.value );
28 30
       }
29 31
     });
30 32
   });
... ...
@@ -46,13 +48,11 @@
46 48
 
47 49
 </div><!-- End demo -->
48 50
 
  51
+
  52
+
49 53
 <div class="demo-description">
50  
-<p>
51  
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.
52  
-</p>
53  
-<p>
54  
-The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.
55  
-</p>
  54
+<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
  55
+<p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p>
56 56
 </div><!-- End demo-description -->
57 57
 
58 58
 </body>
Txt demos/autocomplete/xml.html
  • View file @ df932bb
... ...
@@ -1,45 +1,47 @@
1 1
 <!DOCTYPE html>
2 2
 <html lang="en">
3 3
 <head>
4  
-  <meta charset="UTF-8" />
  4
+  <meta charset="utf-8" />
5 5
   <title>jQuery UI Autocomplete Remote datasource demo</title>
6  
-  <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7  
-  <script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8  
-  <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9  
-  <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10  
-  <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
11  
-  <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
12  
-  <link type="text/css" href="../demos.css" rel="stylesheet" />
13  
-  <style type="text/css">
  6
+  <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
  7
+  <script src="../../jquery-1.4.2.js"></script>
  8
+  <script src="../../ui/jquery.ui.core.js"></script>
  9
+  <script src="../../ui/jquery.ui.widget.js"></script>
  10
+  <script src="../../ui/jquery.ui.position.js"></script>
  11
+  <script src="../../ui/jquery.ui.autocomplete.js"></script>
  12
+  <link rel="stylesheet" href="../demos.css">
  13
+  <style>
14 14
   .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
15 15
   </style>
16  
-  <script type="text/javascript">
  16
+  <script>
17 17
   $(function() {
18  
-    function log(message) {
19  
-      $("<div/>").text(message).prependTo("#log");
20  
-      $("#log").attr("scrollTop", 0);
  18
+    function log( message ) {
  19
+      $( "<div/>" ).text( message ).prependTo( "#log" );
  20
+      $( "#log" ).attr( "scrollTop", 0 );
21 21
     }
22  
-    
  22
+
23 23
     $.ajax({
24 24
       url: "london.xml",
25 25
       dataType: "xml",
26  
-      success: function(xmlResponse) {
27  
-        var data = $("geoname", xmlResponse).map(function() {
  26
+      success: function( xmlResponse ) {
  27
+        var data = $( "geoname", xmlResponse ).map(function() {
28 28
           return {
29  
-            value: $("name", this).text() + ", " + ($.trim($("countryName", this).text()) || "(unknown country)"),
30  
-            id: $("geonameId", this).text()
  29
+            value: $( "name", this ).text() + ", " +
  30
+              ( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
  31
+            id: $( "geonameId", this ).text()
31 32
           };
32 33
         }).get();
33  
-        $("#birds").autocomplete({
  34
+        $( "#birds" ).autocomplete({
34 35
           source: data,
35 36
           minLength: 0,
36  
-          select: function(event, ui) {
37  
-            log(ui.item ? ("Selected: " + ui.item.value + ", geonameId: " + ui.item.id) : "Nothing selected, input was " + this.value);
  37
+          select: function( event, ui ) {
  38
+            log( ui.item ?
  39
+              "Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
  40
+              "Nothing selected, input was " + this.value );
38 41
           }
39 42
         });
40 43
       }
41  
-    })
42  
-    
  44
+    });
43 45
   });
44 46
   </script>
45 47
 </head>
... ...
@@ -59,13 +61,11 @@
59 61
 
60 62
 </div><!-- End demo -->
61 63
 
  64
+
  65
+
62 66
 <div class="demo-description">
63  
-<p>
64  
-This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.
65  
-</p>
66  
-<p>
67  
-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.
68  
-</p>
  67
+<p>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.</p>
  68
+<p>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.</p>
69 69
 </div><!-- End demo-description -->
70 70
 
71 71
 </body>

0 notes on commit df932bb

Please log in to comment.
Dedicated Server Powered by the Dedicated Servers and
Cloud Computing of Rackspace Hosting®
  • Blog
  • Support
  • Training
  • Job Board
  • Shop
  • Contact
  • API
  • Status
  • © 2010 GitHub Inc. All rights reserved.
  • Terms of Service
  • Privacy
  • Security
  • English
  • Deutsch
  • Français
  • 日本語
  • Português (BR)
  • 中文
  • See all available languages

Your current locale selection: English. Choose another?

  • English
  • Afrikaans
  • Català
  • Čeština
  • Deutsch
  • Español
  • Français
  • Hrvatski
  • Indonesia
  • Italiano
  • 日本語
  • Nederlands
  • Norsk
  • Polski
  • Português (BR)
  • Српски
  • Svenska
  • 中文