5 <title>jQuery UI Autocomplete - Custom data and display</title>
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7 <script src="../../jquery-1.9.1.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.menu.js"></script>
12 <script src="../../ui/jquery.ui.autocomplete.js"></script>
13 <link rel="stylesheet" href="../demos.css">
25 #project-description {
36 desc: "the write less, do more, JavaScript library",
37 icon: "jquery_32x32.png"
42 desc: "the official user interface library for jQuery",
43 icon: "jqueryui_32x32.png"
48 desc: "a pure-JavaScript CSS selector engine",
49 icon: "sizzlejs_32x32.png"
53 $( "#project" ).autocomplete({
56 focus: function( event, ui ) {
57 $( "#project" ).val( ui.item.label );
60 select: function( event, ui ) {
61 $( "#project" ).val( ui.item.label );
62 $( "#project-id" ).val( ui.item.value );
63 $( "#project-description" ).html( ui.item.desc );
64 $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
69 .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
71 .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
79 <div id="project-label">Select a project (type "j" for a start):</div>
80 <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
82 <input type="hidden" id="project-id">
83 <p id="project-description"></p>
85 <div class="demo-description">
86 <p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p>
87 <p>Try typing "j" to get a list of projects or just press the down arrow.</p>