<!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>