jquery ui 自動補全demo
阿新 • • 發佈：2019-01-04
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function () { var myData = [{'name': 'zhangsan','height':'1.76'}, {'name': 'lisi','height':'1.86'}, {'name': 'wangwu','height':'1.96'}]; $("#tags").autocomplete({ source: myData, focus: function (event, ui) { console.log('選中了'); console.dir(ui); return false; }, select: function (e, ui) { $('#tags').val(ui.item.name + '====>' + ui.item.height); return false; } }).autocomplete("instance")._renderItem = function (ul, item) { return $("<li>") .append("<div><span>" + item.name + "</span><br>" + item.height + "</div>") .appendTo(ul); }; }); </script> </head> <body> <input id="tags"> </body> </html>