jquery+ajax 实现搜索框提示
2024-09-05 07:05:29
<!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>
最新文章
- Linux文件权限概念
- MySQL的学习--用户创建授权
- [转载] 使用MySQL Proxy解决MySQL主从同步延迟
- Oracle视图详解
- Struts1与Struts2的异同
- LED驅動芯片 兩種恒流控制方式
- Powershell Mail module, 发送outbox 里的全部邮件（一个.csv文件代表一封邮件）
- （白书训练计划）UVa 120 Stacks of Flapjacks(构造法)
- WebStorm中Node.js项目配置教程（1）——创建项目
- Eclipse 中，web项目在Tomcat运行时填写不了Server name
- UVa816，Ordering Tasks，WA
- java poi导入Excel（个人代码）
- 关于scrapy 使用代理相关问题
- Gym.101955: Asia Shenyang Regional Contest(寒假自训第10场)
- WOSA/XFS PTR Form解析库—头文件
- Visual Stdio Code编辑Mark Down
- Android学习记录（5）—在java中学习多线程下载之断点续传②
- python习题-判断输入字符串是不是小数类型
- Codeforces Round #435 (Div. 2) B (二分图) C(构造)
- ubuntu的 mysql 存储目录迁移