aboutsummaryrefslogtreecommitdiffstats
path: root/include/jquery_ui/development-bundle/demos/autocomplete/custom-data.html
diff options
context:
space:
mode:
Diffstat (limited to 'include/jquery_ui/development-bundle/demos/autocomplete/custom-data.html')
-rw-r--r--include/jquery_ui/development-bundle/demos/autocomplete/custom-data.html95
1 files changed, 0 insertions, 95 deletions
diff --git a/include/jquery_ui/development-bundle/demos/autocomplete/custom-data.html b/include/jquery_ui/development-bundle/demos/autocomplete/custom-data.html
deleted file mode 100644
index e2d0042d8..000000000
--- a/include/jquery_ui/development-bundle/demos/autocomplete/custom-data.html
+++ /dev/null
@@ -1,95 +0,0 @@
-<!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.7.2.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.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( "autocomplete" )._renderItem = function( ul, item ) {
- return $( "<li></li>" )
- .data( "item.autocomplete", item )
- .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
- .appendTo( ul );
- };
- });
- </script>
-</head>
-<body>
-
-<div class="demo">
- <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"/>
- <input id="project"/>
- <input type="hidden" id="project-id"/>
- <p id="project-description"></p>
-</div><!-- End demo -->
-
-
-
-<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><!-- End demo-description -->
-
-</body>
-</html>