使用无刷新技术智能改造搜索框提示，配合百度搜索

翻译

其基本原则：

1.为搜索框编写js绑定事件onkeyup(键盘输入)和onfocus(当鼠标在搜索框外单击时清空提示)

2.首先获得用户输入，然后将获得的数据传输到服务器，服务器将数据传输到后台。然后，后台获取从服务器传输的数据，并对其进行处理以获取关联数据，并将json格式返回给前端。前端通过回调函数将返回的json解析为文本，并将文本传输到搜索框下方的显示窗口。

以下jar包支持json

search.jsp

% @ page language=' Java ' ContentType=' text/html；charset=UTF-8 ' page encoding=' UTF-8 ' %！doctype HTML public '-//W3C//DTD HTML 4.01 Transitional//en ' ' http://www.w3.org/tr/HTML4/loose.dtd' HTML head title Ajax search/title script type=' text/JavaScript '/function getMore(){ var xmlHttp//首先，获取用户的输入var content=document . getelementbyid('关键字')；if(content . value==' '){ KeyWordBlur()；//执行清空方法，这样当搜索框中没有数据时，下面的剩余数据也会被动态清空；}//alert(content . value)；//将用户输入发送到服务器，创建一个名为XmlHttp对象的对象//xmlHttp=get XmlHttp对象XmlHttp=CreatXMLHttp()；//alert(XMlhttp)；//将数据发送到服务器var url='serch？关键字=' escape(content . value)；//如果不用转义函数翻译，中文翻译会有问题。//true表示javascript脚本将在send()方法之后继续执行，而不是等待服务器端相应的xmlHttp.open('GET '，url，true)；//xmlHttp绑定一个回调方法，接受来自服务器的相应调用，当xmlHttp的状态发生变化时，将调用该回调方法。//xmlHttp状态为0~4，只关心4 //4的方法处于完成状态，表示交互完成，只有交互完成才会调用回调方法xmlHttp . onreadystatechange=callback。xmlhttp . send(null)；//send发送内容体，但是所有的参数都已经写在URL里了。//回调函数==！请注意，回调方法应该在这里的方法中创建，因为创建的xmlHttp对象不是全局变量//它是在getMore()方法中创建的，并且可以提取变量并将其转换为全局变量functioncallback () {if (xmlhttp。readystate==4) {//200代表服务器相应的成功。404表示找不到资源。500服务器内部错误if(xmlHttp.status==200){ //交互成功，以文本格式var result=xmlHttp.responseText获取对应数据；//解析json格式var JSON=eval('(' result ')')；//两边加括号，让js知道。//获取数据后，就可以开始展示了。

在输入框的下边展示set content(JSON)；} } } //设置关联数据展示，参数代表的是服务器传递过来的关联数据函数setContent(contents){//setLocation()；//设置跟输入框一样宽度KeyWordBlur()；//在每次得到值之前先清空一下之前的残留数据var size=contents.length//根据关联的数据长度，来生成多少tr /设置内容for(var I=0；isizei ){ //不用appendChild()方法是因为不同浏览器可能不兼容该方法var next node=contents[I]；//代表json格式的第我个元素var new row=content _ table _ body。insert row()；//创建行var新单元格=新行。insert cell()；//创建单元格新细胞。inner html=contents[I]；//将数据赋值给单元格} }}//获得XmlHttp对象函数CreatXMLHttp(){ //要考虑不同浏览器的写法//大多数浏览器使用var xmlHttpReqif(窗口. XMLHttpRequest){//火狐xmlHttpReq=new XMLHttpRequest()；}else{ /* if(window .ActiveX对象){ xmlHttpReq=新的w ActiveX对象(' Microsoft .XMLHTTP’)；//例如工程师协会有很多版本，不一定能创建出来这个对象，所以要添加以下一个判断//换一种方法，保证创建if(！xmlHttp){ xmlHttpReq=new ActiveObject(' Msxml 2 .XMLHTTP’)；} } *///一定要如下格式写上述格式火狐工业管理学(工业工程)亲测不好使尝试{//IE xmlHttpReq=新ActiveX对象(' Microsoft .XMLHTTP’)；} catch (e) { try {//IE浏览器xmlHttpReq=新的ActiveX对象(' Msxml 2 .XMLHTTP’)；} catch (e) { } } }返回xmlHttpReq}//失去焦点的时候函数keywordBlur(){ //要获得身体的元素长度，才能知道要遍历多少次var contentTableBody=文档。getelementbyid(' content _ table _ body ')；var size=contenttablebody。子节点。长度；//因为是删除子节点，所以是从后往前才能删，同二叉树，删除子节点for(var I=size-1；I=0；I-){ contenttablebody。移除子项(contenttablebody。子节点[I])；}文档。getelementbyid(' PopDiv ')。风格。边框=“无”；}/script style type=' text/CSS '/* # mydiv { position : absolute；左侧：30%;前：50%；左边距： 100像素；} */.鼠标悬停在{背景： # 708090；color: # FFFAFA}。鼠标移出{背景： # FFFAFAcolor : # 000000 }/style/head body div id=' my div '！-输入框-input type=' text ' id=' keyword ' size=' 50 ' on bulr=' keyword blur()' onkeyup=' getMore()' onfocus=' getMore()'/input type=' button ' value='百度一下wise='50px '！-下面是内容展示的区域-div id=' popDiv ' table id=' content table ' bgcolor=' # FFFAFA '边框=' 0 '单元格填充=' 0 '单元格间距=' 0 ' t正文id=' content _ table _ body '！-这个是动态查询出来的数据显示的地方- !-TRT dajax 1/TD/tr TRT dajax 2/TD/tr TRT dajx 3/TD/tr-/t body/table/div/div/body/HTMlSearcheServlet。班级

package com.ninka导入Java。io。ioexception导入Java。乌提尔。ArrayList导入Java。乌提尔。列表；导入javax。servlet。servletexception导入javax。servlet。http。HttpServlet导入javax。servlet。http。HttpServletrequest导入javax。servlet。http。HttpServletResponse导入净。SF。JSON。jsonarray公共类SearchServlet扩展了HttpServlet { static ListString data=new arrayListString()；静态{数据。添加(' Ajax 1 ')；数据。add(' aja x2 ')；数据。添加(' Ajax 3 ')；数据。添加(' bichi 1 ')；数据。添加(' bichi 2 ')；数据。添加(' PHP ')；数据。添加(' JavaScript ')；数据。添加(' Java ')；数据。添加(' html ')；} @覆盖受保护的void doGet(Httpservletrequest请求，HttpServletResponse响应)引发ServletException，IOException { //设置下编码格式请求。setcharacter encoding(' UTF-8 ')；回应。setcharacter encoding(' UTF-8 ')；系统。出去。println(' 123 ')；//首先获得客户端传来的数据，注意传过来的参数关键字一定要写对，否则会空指针异常线关键字=request.getParameter('关键字');//获得关键字之后进行处理，得到关联数据列表字符串列表数据=获取数据(关键字);//返回json格式系统。出去。println(JSonarray。FromObject(列表数据))；//jsonarray。FromObject(列表数据)；response.getWriter().write(JSonarray。FromObject(列表数据).toString())；} //获得关联数据方法公共列表字符串获取数据(字符串关键字){ list String list=new ArrayList String()；for(String data:datas){ //如果传递过来的数据，属于词库里面的话，那么就把包含关键词的数据打包成列表，向客户端传if(data.contains(关键字)){ list.add(数据);} }返回列表；}}web.xml

？可扩展标记语言版本='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 ' display-nameajaxtest/display-name-welcome-file-list-为什么要用搜索？因为在射流研究…中定义全球资源定位器(统一资源定位符)的时候写的是搜索-servlet-名称搜索/servlet-名称servlet-classcom.ninka.SearchServlet/servlet-class/servlet servlet-映射servlet-名称搜索/servlet-名称URL-模式//URL-模式/servlet-映射/web-app以上所述是小编给大家介绍的Servlet Ajax实现智能搜索框智能提示功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！