使用ajax+Jquery实现搜索框的历史记录提示功能
仇和蔼
- 当键盘离开(keyUP事件)的时候进行进行相关的提示（也就是发送请求进行查询）
- 用一个盒子进行封装历史记录。（平时的时候通过display:none进行隐藏）
- input的输入框需要通过一个id属性进行绑定，因为Jquery需要使用。
- 可以css设置一下你的鼠标放上去之后，你的历史记录背景颜色会变化
- 后端的数据库可以通过list集合，或者map集合进行模拟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度下拉框</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="static/js/jquery-1.9.min.js"></script>
<script type="text/javascript">
//页面加载完成就执行的代码块
$(function(){
// alert("134");
$("#content").keyup(function(){
//向服务器发送请求
$.ajax({
// $("")
url:"search",//请求的地址
type:"post",//请求的路径
dataType:"text",// 请求服务器应该回来的数据类型
data:{"name":this.value},
success:function(res){
// 表示没有查询到数据
if(res==" "){
return;
}
//获取结果并通过分割字符串进行显示
var cons=d.split(",");
// 声明变量
var divs=" ";
for(var i=0;i<cons.length;i++){
divs+="<div οnclick='writeContent(this)' οnmοuseοver='changeBgColor(this)' οnmοuseοut='trunBgColor(this)'>"+cons[i]+"</div>";
}
// 将拼接的html代码块显示在查询的结果中
tips.html(divs);
//将盒子设置显示
tips.css("display","block");
},
error:function(){
alert("你的请求失败了");
}
});
});
function trunBgColor(div){
div.style.background="red";
}
function changeBgColor(div){
div.style.background="blue";
}
function writeContent(div){
//将div数据进行相关的显示
var c=div.innerHTML;
$("#content").val(c);
div.parentNode.style.display="none";
}
})
// 模拟数据库的查询请求
// String name=request.getParameter("name");
// List<String> list=new ArrayList<String>();
// list.add("m1"); list.add("m2"); list.add("m3"); list.add("jack1"); list.add("jack2"); list.add("jack3"); String info="";
// if(name.startWith("m")) fori list if i>0 info+=","; info+=list.get(i);
</script>
<body>
<form action="" method="get" onmouseover=" " onmouseout="">
<div class="divSearch">
<input type="text" name="name" id="content">
<input type="submit" value="搜索">
</div>
</form>
<div class="tips" style="display:none;width: 200px; height: 200px;border: gray solid 1px;">
</div>
<script type="text/javascript " src="static/js/quick_links.js "></script>
<script src="static/js/cookie_utils.js"></script>
<script src="static/js/vue.min.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/utils.js"></script>
</body>
</html>
类似资料：