使用埃阿斯模仿百度搜索框的自动提示功能实例

啊啊，熬夜了。今天学习了创建交互式、快速动态网页应用的网页开发技术给我的感觉就是，"哇塞"阿贾克斯好酷炫哦，(额。后端狗，接触到了大前端的魅力了),这么晚了还是直奔主题把走吧！

百度搜索提示框，我想大家都很熟悉了把，是什么样子我也就不再赘述。直接看代码

来我们写一个简陋的jsp页面你看！是这个样子的

下面是代码：

% @ page语言=' Java ' ContentType=' text/html；charset=UTF-8 '页面编码=' UTF-8 ' %！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 '标题测试百度/标题/头体！-文本输入框- div id='serach '输入类型=“文本”名称='text' id='text' /输入类型='提交'值='搜索//div！-提示下拉框-div id=' tips ' style=' display : none；宽度： 171像素；border: 1px纯粉色；/div /body脚本window.onload=function(){ //获取文本输入框var textElment=文档。getelementbyid(' text ')；//获取下提示框var div=文档。getelementbyid(' tips ')；textelment。onkeyup=function(){//获取用户输入的值textElment.value//如果文本框中没有值，则下拉框被隐藏，不显示if(text==' '){ div。风格。显示='无'；返回；} //获取XMLHttpRequest对象var xhr=new XMLHttpRequest()；//编写回调函数xhr。onreadystatechange=function(){//判断回调的条件是否准备齐全if(xhr。readystate==4){ if(xhr。status==200){//取的服务器端传回的数据var str=xhr.responseText//判断传回的数据是否为空，若是则直接返回，不显示if(str==' '){ return；} //我们将会在服务器端把数据用，隔开，当然这里也可以使用json var result=str.split('，')；var childs=//遍历结果集，将结果集中的每一条数据用一个差异显示，把所有的差异放入到蔡尔兹中for(var I=0；iresult . lengthi){ childs=' div onclick=' Write(this)' onmouseout=' recovercolorwenmouseout(this)' ' onmouseover=' changecorowhenmouseover(this)'结果[一]'/div；} //把蔡尔兹这差异集合放入到下拉提示框的父差异中，上面我们以获取了div.innerHTML=childsdiv。风格。display=' block} } } //创建与服务器的连接xhr.open('GET '，' $ { page context。请求。上下文路径}/test？text=' text)；//发送xhr。send()；} } //鼠标悬停时改变差异的颜色函数changecorowhenmouseover(div){ div。风格。背景色='粉色'；} //鼠标移出时回复差异颜色函数recovercolorwenmouseout(div){ div。风格。背景色=' '；} //当鼠标带点击差异时，将差异的值赋给输入文本框函数Write(div){ //将差异中的值赋给文本框document.getElementById('text ').价值=div.innerHTML//让下拉提示框消失div。ParentNode。风格。显示='无'；}/脚本/html再看servlet:

打包。朱世毅。servlet导入Java。io。ioexception导入Java。乌提尔。ArrayList导入Java。乌提尔。列表；导入javax。servlet。servletexception导入javax。servlet。注释。webservlet导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse/** * 百度下拉框服务器端*/@ WebServlet("/test ")公共类测试扩展了httpersvlet { private static最终长串行版本id=1L；受保护的void doGet(HttpServletRequest请求，HttpServletResponse响应)引发ServletException，IOException {//获取前端传入的数据字符串文本=请求。getParameter(' text ')；//我们在这里也还是向目录集合中添加数据，模拟数据库的查询操作System.out.println(文本);listString list=new ArrayList()；名单。添加('朱芯仪')；list.add('朱伟');名单。添加(' juyuanz ')；名单。加(‘朱德’)；//将数据转换成字符串字符串str=if(文本。以(' z '){ for(int I=0；伊利斯特。size()；i ) {if(i0) {str='，'；} str=list。得到(我)；}//将处理好的数据传回给客户端response.getWriter().写入(字符串);}}受保护的void doPost(httpersvletrequest请求，HttpServletResponse响应)引发ServletException，IOException {//TODO自动生成的方法stubdoGet(请求，响应);} }演示一下看看呢，(很尴尬，楼主还不会做可交换的图像格式图呢，各位先看看静态图把。)

输入z '试一试呢：

点击一下试一试呢：

好的了，这就是一个简单的模仿百度的搜索框啦，以上有不足的地方你一定要指出哦，谢谢。拜啦

以上这篇使用埃阿斯模仿百度搜索框的自动提示功能实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。