git://git.onelab.eu / unfold.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
imported the whole jquery-ui package, refreshed with 1.10.2
[unfold.git] / third-party / jquery-ui-1.10.2 / demos / autocomplete / custom-data.html
diff --git a/third-party/jquery-ui-1.10.2/demos/autocomplete/custom-data.html b/third-party/jquery-ui-1.10.2/demos/autocomplete/custom-data.html
new file mode 100644 (file)
index 0000000..4e518db
--- /dev/null
+++ b/third-party/jquery-ui-1.10.2/demos/autocomplete/custom-data.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+<head>
+       <meta charset="utf-8">
+       <title>jQuery UI Autocomplete - Custom data and display</title>
+       <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+       <script src="../../jquery-1.9.1.js"></script>
+       <script src="../../ui/jquery.ui.core.js"></script>
+       <script src="../../ui/jquery.ui.widget.js"></script>
+       <script src="../../ui/jquery.ui.position.js"></script>
+       <script src="../../ui/jquery.ui.menu.js"></script>
+       <script src="../../ui/jquery.ui.autocomplete.js"></script>
+       <link rel="stylesheet" href="../demos.css">
+       <style>
+       #project-label {
+               display: block;
+               font-weight: bold;
+               margin-bottom: 1em;
+       }
+       #project-icon {
+               float: left;
+               height: 32px;
+               width: 32px;
+       }
+       #project-description {
+               margin: 0;
+               padding: 0;
+       }
+       </style>
+       <script>
+       $(function() {
+               var projects = [
+                       {
+                               value: "jquery",
+                               label: "jQuery",
+                               desc: "the write less, do more, JavaScript library",
+                               icon: "jquery_32x32.png"
+                       },
+                       {
+                               value: "jquery-ui",
+                               label: "jQuery UI",
+                               desc: "the official user interface library for jQuery",
+                               icon: "jqueryui_32x32.png"
+                       },
+                       {
+                               value: "sizzlejs",
+                               label: "Sizzle JS",
+                               desc: "a pure-JavaScript CSS selector engine",
+                               icon: "sizzlejs_32x32.png"
+                       }
+               ];
+
+               $( "#project" ).autocomplete({
+                       minLength: 0,
+                       source: projects,
+                       focus: function( event, ui ) {
+                               $( "#project" ).val( ui.item.label );
+                               return false;
+                       },
+                       select: function( event, ui ) {
+                               $( "#project" ).val( ui.item.label );
+                               $( "#project-id" ).val( ui.item.value );
+                               $( "#project-description" ).html( ui.item.desc );
+                               $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
+
+                               return false;
+                       }
+               })
+               .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
+                       return $( "<li>" )
+                               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
+                               .appendTo( ul );
+               };
+       });
+       </script>
+</head>
+<body>
+
+<div id="project-label">Select a project (type "j" for a start):</div>
+<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
+<input id="project">
+<input type="hidden" id="project-id">
+<p id="project-description"></p>
+
+<div class="demo-description">
+<p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p>
+<p>Try typing "j" to get a list of projects or just press the down arrow.</p>
+</div>
+</body>
+</html>
myslice (django)