使用Ajax实现此效果
1.准备数据的serlvet
public class SelectServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//设置请求编码格式
//设置响应编码格式
//获取请求信息
String val=req.getParameter("val");
System.out.println(val);
//处理请求信息
//创建原始数据池
String[] str={"abc","application","ajax","body","back","beijing","client","color","copy"};
//创建list存储，符合要求的数据
ArrayList<String> list=new ArrayList<String>();
//遍历数据池，找出符合要求的数据
for(int i=0;i<str.length;i++){
if(str[i].startsWith(val)){
list.add(str[i]);
}
}
System.out.println(list);
//开始响应 "['a','b','c']"
String s="[";
for(int i=0;i<list.size();i++){
s=s+"'"+list.get(i)+"',";
}
s=s+"]";
System.out.println(s);
resp.getWriter().write(s);
}
}<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<style type="text/css">
#showdiv{
width:500px;
margin:0px auto;
margin-top:200px;
}
#search{
width:350px;
height:30px;
}
body{
background-color:gray;
background:url(img/background.jpg);
}
input[type=button]{
border:none;
height: 29px;
width:80px;
}
input[type=button]:HOVER{
color:red;
}
#div01{
width:350px;
border:solid 1px;
border-top:none;
background-color: white;
margin-left: 425px;
}
</style>
<!-- 使用ajax技术实现下拉框提示效果 -->
<script type="text/javascript">
//定义计数器
var count=-1;
//创建变量记录setTimeout的id值
var id;
function getData(event){
//获取evet对象来获取用户下压的键盘值
var eve=window.event || event;
var code=eve.keyCode;
//获取用户查询数据信息
var val=document.getElementById("search").value;
//获取ajax引擎对象
var ajax;
//获取不同版本的ajax引擎
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//复写onreadystatuechange
ajax.onreadystatechange=function(){
if(ajax.readyState==4){
if(ajax.status==200){
//获取响应结果
var result=ajax.responseText;
//使用eval将结果转换为可执行的js代码
eval("var data="+result);
//获取div01对象
var div=document.getElementById("div01");
//清空div数据
div.innerHTML="";
//遍历data数组
for(var i=0;i<data.length;i++){
div.innerHTML=div.innerHTML+"<div οnmοuseοver='testMouse(this)'>"+data[i]+"</div>";
}
//将隐藏的div显示
div.style.display="";
}
}
}
//获取所有填充好的元素对象集合
var div=document.getElementById("div01");
var divChild=div.childNodes;
//判断是否是向下的键，实现键盘联动
if(code == 40){
//遍历divChild清空背景色
for(var i=0;i<divChild.length;i++){
divChild[i].style.backgroundColor="";
}
count=count<divChild.length-1?++count:0;
divChild[count].style.backgroundColor="red";
document.getElementById("search").value=divChild[count].innerHTML;
}
if(code == 38){
//遍历divChild清空背景色
for(var i=0;i<divChild.length;i++){
divChild[i].style.backgroundColor="";
}
count=count>0?--count:divChild.length-1;
divChild[count].style.backgroundColor="red";
document.getElementById("search").value=divChild[count].innerHTML;
}
//请求
if(code!=40 && code!=38){
if(val!=""&&val!=null){
window.clearTimeout(id);
id=window.setTimeout(function(){
//创建并发送请求
ajax.open("get","sel.action?val="+val);
ajax.send(null);
},500);
}else{
//将div清空并隐藏
var div=document.getElementById("div01");
div.innerHTML="";
div.style.display="none";
}
}
}
//鼠标悬停效果实现
function testMouse(dd){
//获取dd的父div元素对象
var pdiv=dd.parentNode;
//获取所有的子div对象集合
var cdiv=pdiv.childNodes;
//清空所有的div背景样式
for(var i=0;i<cdiv.length;i++){
cdiv[i].style.backgroundColor="";
if(cdiv[i]==dd){
count=i;
}
}
//改变鼠标悬停的元素背景色
dd.style.backgroundColor="red";
}
</script>
</head>
<body>
<div id="showdiv">
<input type="text" name="search" id="search" value="" οnkeyup="getData(event);"/>
<input type="button" value="百度一下" />
</div>
<div id="div01" style="display: none"></div>
</body>
</html>
实现的效果如下：
1万+