<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #search_result{ width:302px; position:absolute; left:618px; top:180px; z-index:1; overflow:hidden; background:#dcf6f8; border:#c5dadb 1px solid; border-top:none; } .line{ font-size:12px; color:#000; background:#aed34f; width:302px; padding:2px; } .hover{ background:#007ab8; color:#fff; } </style> </head> <body> <script> $(document).ready(function(){ $(\'#search\').keyup(function(){ $.ajax{ type:\'GET\', url:\'include/ajax_search.php\',//处理页面的url地址 data:\'txt_search=\'+escape($(\'#search\').val()),//要传递参数 success:function(data){ if(data!=\'\'){ var ss; ss=data.split("@"); var layer; layer="<table>"; for(var i=0;i<ss.length-1;i++){ layer+="<tr><td class=\'line\'>"+ss[i]+"</td></tr>"; } layer+="</table>" $(\'#search_result\').empty(); $(\'#search_result\').append(layer); $(\'.line:first\').addClass(\'hover\'); $(\'#search_result\').css(\'display\',\'\'); $(\'.line\').hover(function(){ $(\'.line\').removeClass(\'hover\'); $(this).addClass(\'hover\'); },function(){ $(this).removeClass(\'hover\'); }); $(\'.line\').click(function(){ $(\'#search\').val($(this).text()); }) }else{ $(\'#search_result\').empty(); $(\'#search_result\').css(\'display\',\'none\'); } }, error(function() { alert(\'O No~~~~\'); }); }esle if(keyCode==38){ $(\'#aa tr.hover\').prev().addClass(\'hover\'); $(\'#aa tr.hover\').next().removeClass(\'hover\'); $(\'#search\').val($(\'#aa tr.hover\').text()); }else if(keyCode==40){ $(\'#aa tr.hover\').next().addClass(\'hover\'); $(\'#aa tr.hover\').prev().removeClass(\'hover\'); $(\'#search\').val($(\'#aa tr.hover\').text()); } }); }); $(document).ready(function(){ $().click(function(){ $(\'#search_result\').empty(); $(\'#search_result\').css(\'display\',\'none\'); }); }); </script> </body> </html>