http://www.runoob.com/jqueryui/example-autocomplete.html
自定义数据并显示 您可以使用自定义数据格式，并通过简单地重载默认的聚焦和选择行为来显示数据。 尝试键入 "j"，或者按向下箭头按键，即可得到一个项目列表。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 自动完成（Autocomplete） - 自定义数据并显示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> #project-label { display: block; font-weight: bold; margin-bottom: 1em; } #project-icon { float: left; height: 32px; 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( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li>" ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul ); }; }); </script> </head> <body> <div id="project-label">选择一个项目（请键入 "j"）：</div> <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt=""> <input id="project"> <input type="hidden" id="project-id"> <p id="project-description"></p> </body> </html>