<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script type="text/javascript" language="javascript" src="js/trirand/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/trirand/jquery-ui-1.10.4.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="css/trirand/jquery-ui-1.10.4.css" /> <style type="text/css"> #text{ width: 200px; margin: 50px auto; height: 36px; line-height: 36px; } .Eui_Prompt_list { max-height: 200px; overflow-y: auto; overflow-x: hidden; padding: 3px; } .Eui_Prompt_list li { height: 30px; line-height: 30px; } .Eui_Prompt_list a { display: block; padding: 0 5px; border: solid 1px transparent; } .Eui_Prompt_list a:hover { margin: 0; } </style> </head> <body> <div> <input type="text" id=text/> </div> <script> $(function() { var projects = [ { value: "j嘻嘻", label: "哈哈1", desc: "列表a" }, { value: "j嘿嘿", label: "呵呵2", desc: "做些测试b" }, { value: "j嗯嗯", label: "呃呃3", desc: "萌萌哒c" }, { value: "j呼呼", label: "啦啦4", desc: "测试fd" } ]; $('#text').autocomplete({ delay: 0, minChars: 0, //激活自动完成的输入字符数 matchContains: true, //只要包含输入字符就会显示提示 autoFill: false, //自动填充输入框 mustMatch: true, //与否必须与自动完成提示匹配 // source: projects, source: function( request, response ) { // 回到 autocomplete，但是提取最后的条目 var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" ); response( $.grep( projects, function( value) { return matcher.test( value.label ) || matcher.test( value.value ) || matcher.test( value.desc ) || matcher.test( value ); // return matcher.test( value.value ); })); } , focus: function( event, ui ) { return false; } , select: function( event, ui ) { $(this).val( ui.item.value); return false; } }).data( "ui-autocomplete" )._renderItem = function( ul, item ) { return $( "<li></li>" ) .append( "<a href='javascript:void(0);'>"+item.value+"</a>" ) .appendTo( ul ); } $( "#text" ).data( "ui-autocomplete" )._resizeMenu = function() { var w = $( "#text").parent().outerWidth() this.menu.element.addClass('Eui_Prompt_list').css({'width':w}) } }); </script> </body> </html>