<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery UI Autocomplete Custom Data Demo</title> <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.position.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script> <link type="text/css" href="../demos.css" rel="stylesheet" /> <style type="text/css"> #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 type="text/javascript"> $(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; } }); }); </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>