1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="UTF-8" /> |
|
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"> |
|
14 #project-label { |
|
15 display: block; |
|
16 font-weight: bold; |
|
17 margin-bottom: 1em; |
|
18 } |
|
19 #project-icon { |
|
20 float: left; |
|
21 height: 32px; |
|
22 width: 32px; |
|
23 } |
|
24 #project-description { |
|
25 margin: 0; |
|
26 padding: 0; |
|
27 } |
|
28 </style> |
|
29 <script type="text/javascript"> |
|
30 $(function() { |
|
31 var projects = [ |
|
32 { |
|
33 value: 'jquery', |
|
34 label: 'jQuery', |
|
35 desc: 'the write less, do more, JavaScript library', |
|
36 icon: 'jquery_32x32.png' |
|
37 }, |
|
38 { |
|
39 value: 'jquery-ui', |
|
40 label: 'jQuery UI', |
|
41 desc: 'the official user interface library for jQuery', |
|
42 icon: 'jqueryui_32x32.png' |
|
43 }, |
|
44 { |
|
45 value: 'sizzlejs', |
|
46 label: 'Sizzle JS', |
|
47 desc: 'a pure-JavaScript CSS selector engine', |
|
48 icon: 'sizzlejs_32x32.png' |
|
49 } |
|
50 ]; |
|
51 |
|
52 $('#project').autocomplete({ |
|
53 minLength: 0, |
|
54 source: projects, |
|
55 focus: function(event, ui) { |
|
56 $('#project').val(ui.item.label); |
|
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 .data( "autocomplete" )._renderItem = function( ul, item ) { |
|
69 return $( "<li></li>" ) |
|
70 .data( "item.autocomplete", item ) |
|
71 .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) |
|
72 .appendTo( ul ); |
|
73 }; |
|
74 }); |
|
75 </script> |
|
76 </head> |
|
77 <body> |
|
78 |
|
79 <div class="demo"> |
|
80 <div id="project-label">Select a project (type "j" for a start):</div> |
|
81 <img id="project-icon" src="../images/transparent_1x1.png" class="ui-state-default"/> |
|
82 <input id="project"/> |
|
83 <input type="hidden" id="project-id"/> |
|
84 <p id="project-description"></p> |
|
85 </div><!-- End demo --> |
|
86 |
|
87 <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> |
|
94 </div><!-- End demo-description --> |
|
95 |
|
96 </body> |
|
97 </html> |
|