| 1 | <!doctype html>
|
|---|
| 2 | <html>
|
|---|
| 3 | <head>
|
|---|
| 4 | <title>jQuery UI Autocomplete Custom Data Demo</title>
|
|---|
| 5 | <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
|
|---|
| 6 | <script type="text/javascript" src="../../jquery-1.4.1.js"></script>
|
|---|
| 7 | <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
|
|---|
| 8 | <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
|
|---|
| 9 | <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
|
|---|
| 10 | <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
|
|---|
| 11 | <link type="text/css" href="../demos.css" rel="stylesheet" />
|
|---|
| 12 | <style type="text/css">
|
|---|
| 13 | #project-label {
|
|---|
| 14 | display: block;
|
|---|
| 15 | font-weight: bold;
|
|---|
| 16 | margin-bottom: 1em;
|
|---|
| 17 | }
|
|---|
| 18 | #project-icon {
|
|---|
| 19 | float: left;
|
|---|
| 20 | height: 32px;
|
|---|
| 21 | width: 32px;
|
|---|
| 22 | }
|
|---|
| 23 | #project-description {
|
|---|
| 24 | margin: 0;
|
|---|
| 25 | padding: 0;
|
|---|
| 26 | }
|
|---|
| 27 | </style>
|
|---|
| 28 | <script type="text/javascript">
|
|---|
| 29 | $(function() {
|
|---|
| 30 | var projects = [
|
|---|
| 31 | {
|
|---|
| 32 | value: 'jquery',
|
|---|
| 33 | label: 'jQuery',
|
|---|
| 34 | desc: 'the write less, do more, JavaScript library',
|
|---|
| 35 | icon: 'jquery_32x32.png'
|
|---|
| 36 | },
|
|---|
| 37 | {
|
|---|
| 38 | value: 'jquery-ui',
|
|---|
| 39 | label: 'jQuery UI',
|
|---|
| 40 | desc: 'the official user interface library for jQuery',
|
|---|
| 41 | icon: 'jqueryui_32x32.png'
|
|---|
| 42 | },
|
|---|
| 43 | {
|
|---|
| 44 | value: 'sizzlejs',
|
|---|
| 45 | label: 'Sizzle',
|
|---|
| 46 | desc: 'a pure-JavaScript CSS selector engine',
|
|---|
| 47 | icon: 'sizzlejs_32x32.png'
|
|---|
| 48 | }
|
|---|
| 49 | ];
|
|---|
| 50 |
|
|---|
| 51 | $('#project').autocomplete({
|
|---|
| 52 | minLength: 0,
|
|---|
| 53 | source: projects,
|
|---|
| 54 | focus: function(event, ui) {
|
|---|
| 55 | $('#project').val(ui.item.label);
|
|---|
| 56 |
|
|---|
| 57 | return false;
|
|---|
| 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 |
|
|---|
| 65 | return false;
|
|---|
| 66 | }
|
|---|
| 67 | });
|
|---|
| 68 | });
|
|---|
| 69 | </script>
|
|---|
| 70 | </head>
|
|---|
| 71 | <body>
|
|---|
| 72 |
|
|---|
| 73 | <div class="demo">
|
|---|
| 74 | <label for="tags" id="project-label">Select a project:</label>
|
|---|
| 75 | <img id="project-icon" src="../images/transparent_1x1.png" class="ui-state-default">
|
|---|
| 76 | <input id="project">
|
|---|
| 77 | <input type="hidden" id="project-id">
|
|---|
| 78 | <p id="project-description"></p>
|
|---|
| 79 | </div><!-- End demo -->
|
|---|
| 80 |
|
|---|
| 81 | <div class="demo-description">
|
|---|
| 82 | <p>
|
|---|
| 83 | You can use your own custom data formats and displays by simply overriding the default focus and select actions.
|
|---|
| 84 | </p>
|
|---|
| 85 | <p>
|
|---|
| 86 | Try typing "j" to get a list of projects or just press the down arrow.
|
|---|
| 87 | </p>
|
|---|
| 88 | </div><!-- End demo-description -->
|
|---|
| 89 |
|
|---|
| 90 | </body>
|
|---|
| 91 | </html>
|
|---|
