JS Ajax实现百度智能搜索框

首先浏览实现后的结果，输入一个a之后会出现包含a的下拉列表，当我们点击某一个的时候，搜索框中就会出现点击的值。实现所需要的主要是ajax js。

前端search.jsp

% @ page语言=' Java ' ContentType=' text/html；charset=UTF-8 '页面编码=' UTF-8 ' % html head title在此插入title/title script src=' http : js/jquery。量滴js '/脚本样式类型=' text/CSS ' * { margin 3360 0 auto；padd : 0；} Li { margin :0 height : 20px宽度： 200像素；列表样式：无；}/* # c li: Hover {底色： # F9f9f} */.鼠标上{底色： # F9f9f} .out使用{底色：白色；} #包含{宽度：50%；} /style！jquery脚本类型=' text/JavaScript ' var XMlhttp；函数getmorecents美分(){ var content=document。getelementbyid('关键字');if(内容。value==' '){ ClearContent()；返回；//如果不设置，传到后台的是空值，所有的值都会被输出} xmlHttp=creatxmlHttp()；//alert(XMlhttp)；//要给服务器发送数据var url='searchServlet？关键字=' escape(content。值)；xmlHttp.open('GET '，url，true)；xmlHttp.onreadystatechange=回调；xmlhttp。发送(null)；} //获取XMLHttp对象函数creatxmlHttp(){ var XMlhttp；如果(窗口. XMLHttpRequest){ xmlHttp=new XMLHttpRequest()；}如果(窗口ActiveX对象){ xmlHttp=新的ActiveX对象(' Microsoft .XMLHTTP’)；if(！xmlHttp){ xmlHttp=新的ActiveX对象(' Msxml 2 .XMLHTTP’)；} }返回xmlHttp} //获取XMLHttp对象函数回调(){ if(xmlhttp。readystate==4 xmlhttp。status==200){ var result=xmlhttp。responsetext//解析数据var JSON=eval((“结果”))；//动态显示数据，线束数据在输入框对的下面set content(JSON)；} } //设置关联数据的展示函数setContent(contents){ ClearContent()；var size=contents . length for(var I=0；isizeI){ var next node=contents[I]；//json格式的第我个数据var Li=文档。创建元素(“李”)；李。onmouseover=function(){ this。类名=' on mousedocument.getElementById('关键字')。value=this.innerHTML} Li。onmouseout=function(){ this。类名=' outlose} var text=文档。createtextnode(下一个节点)；li.appendChild(文本);document.getElementById('c ').附录子(李)；} } //清空数据函数ClearContent(){ document。getelementbyid(' c ').innerHTML=} //当控件失去焦点时，清空数据函数out ouche(){ ClearContent()；} //获得焦点时，/script/head body div id=' contain ' div style=' height : 20px；'输入类型=' text ' id=' keyword ' style=' size :50 px；'onkeyup=' getmorecents仙()' onbolr=' outouce()' onfocus=' getmore仙()' input type=' button ' id=' bu ' value='百度一下style=' '/div div id=' PopDiv ' ul id=' c ' Li/Li/ul/div/div/body/html后台searchServlet。爪哇

包搜索；导入Java。io。ioexception导入Java。乌提尔。ArrayList导入Java。乌提尔。列表；导入净。SF。JSON。jsonarray导入javax。servlet。servletexception导入javax。servlet。注释。webservlet导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse/** * Servlet实现类search eservlet */@ WebServlet('/search eservlet ')公共类searcheservlet扩展了HttpServlet {私有静态最终长串行版本id=1L；静态列表字符串数据=新数组字符串();静态{//假数据，模拟数据库读取数据。添加(' Ajax ')；数据。add(' bjax ')；数据。添加(' Ajax FD ')；数据。add(' bfvd ')；数据。添加(' dafdx ')；数据。添加(' fdax ')；数据。添加(' ahg ')；数据。添加(' ddx ')；}/* * * @参见httpersvlet # httpersvlet()*/public search servlet(){ super()；//TODO自动生成的构造函数存根}/* * * @参见httpersvlet # DoGet(httpersvletrequest请求，httpersvletresponse响应)*/受保护的void DoGet(httprsvletrequest请求，httpersvletresponse响应)抛出ServletException，IOException { //TODO自动生成的方法存根doPost(请求，响应);}/* * * @请参见httpersvlet # DoPost(httpersvletrequest请求，httpersvletresponse响应)*/受保护的void doPost(httpersvletrequest请求，httpersvletresponse响应)引发ServletException，IOException { //TODO自动生成的方法存根请求。setcharacten coding(' UTF-8 ')；回应。setcharacter encoding(' UTF-8 ')；线关键字=request.getParameter('关键字');//System.out.println(关键字);ListString listdata=getData(关键字);//返回json，以流的形式写到前台response.getWriter().write(JSonarray。FromObject(列表数据).toString())；} //获取假数据中符合条件的值公共列表字符串获取数据(字符串关键字){ list String list=new ArrayList String()；对于(字符串数据：数据){ if(数据。包含(关键字)){ list.add(数据);} }返回列表；} } xml配置

span style=' font-size :18 px'强壮吗？可扩展标记语言版本='1.0 '编码='UTF-8 '？web-app xmlns : xsi=' http://www。w3。org/2001/XMLSchema-instance ' xmlns=' http://xmlns。JCP。org/XML/ns/javaee ' xsi 3360架构位置=' http://xmlns。JCP。org/XML/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd' ID=' WebApp _ ID '版本=' 3.1 ' servlet servlet-name search eservlet/servlet-name servlet-classsearch.searchServlet/servlet-class目录结构

总结

以上所述是小编给大家介绍的JS Ajax实现百度智能搜索框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！