<!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>
来源：https://www.cnblogs.com/CaseyWei/p/9498621.html