Servlet+Ajax实现智能搜索框智能提示功能
程序员文章站
2022-03-07 12:45:54
利用无刷新技术智能变换搜索框的提示，同百度搜索
效果图
其基本原理：
1.给搜索框编写js绑定事件onkeyup(键盘输入时)、onfocus(当鼠标点击搜索框...
利用无刷新技术智能变换搜索框的提示，同百度搜索
效果图
其基本原理：
1.给搜索框编写js绑定事件onkeyup(键盘输入时)、onfocus(当鼠标点击搜索框外的时候清空提示)
2.首先获得用户输入、之后将获得的数据传给服务器，服务器将数据传给后台，后台获取服务器传来的数据进行处理，得到关联数据，向前端返回json格式，前端通过回调函数，将返回来的json解析成文本，将文本传输到搜索框下方的展示窗
如下为支持json的jar包
search.jsp
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<title>ajax搜索</title>
<script type="text/javascript">
//获得更多关联信息的函数
function getmore(){
var xmlhttp;
//首先获得用户的输入
var content = document.getelementbyid("keyword");
if(content.value==""){
keywordblur();//执行一下清空方法，使搜索框在无数据的时候，下方残留数据也动态清空
return;
}
//alert(content.value);
//要给服务器发送用户输入的内容，要创建对象,叫xmlhttp对象
//xmlhttp=获得xmlhttp对象
xmlhttp=creatxmlhttp();
//alert(xmlhttp);
//要给服务器发送数据
var url="serch?keyword="+escape(content.value);
//如果不用escape这个函数转化一下的话，传中文会有问题
//true表示javascript的脚本会在send()方法之后继续执行，而不会等待来自服务器的相应
xmlhttp.open("get",url,true);
//xmlhttp绑定一个回调方法去接受服务器传来的相应,会在xmlhttp状态改变的时候被调用
//xmlhttp有0~4的状态，只关心4的方法
//4为complete状态，表示交互完成，当交互完成时才会调用回调方法
xmlhttp.onreadystatechange=callback;
xmlhttp.send(null);//send里面发送的是内容体，但参数在url里已经都写完了
//回调函数==!!注意 这里回调方法要在方法内创建，因为创建的xmlhttp对象不是全局变量
//是在getmore()方法里创建的，可以将变量提取出来，变成全局变量
function callback(){
if (xmlhttp.readystate==4){
//200代表服务器相应成功。。。404代表资源未找到。。500服务器内部错误
if(xmlhttp.status==200){
//交互成功，获得相应的数据，是文本格式
var result=xmlhttp.responsetext;
//解析json格式
var json=eval("("+result+")");//要在两边加个小括号，js才能认识
//获得数据之后就可以开始展示了。在输入框的下边展示
setcontent(json);
}
}
}
//设置关联数据展示,参数代表的是服务器传递过来的关联数据
function setcontent(contents){
//setlocation();//设置跟输入框一样宽度
keywordblur();//在每次得到值之前先清空一下之前的残留数据
var size=contents.length;//根据关联的数据长度，来生成多少<tr>
//设置内容
for(var i=0;i<size;i++){
//不用appendchild()方法是因为不同浏览器可能不兼容该方法
var nextnode=contents[i];//代表json格式的第i个元素
var newrow=content_table_body.insertrow();//创建行
var newcell=newrow.insertcell();//创建单元格
newcell.innerhtml=contents[i];//将数据赋值给单元格
}
}
}
//获得xmlhttp对象
function creatxmlhttp(){
//要考虑不同浏览器的写法
//大多数浏览器使用
var xmlhttpreq;
if(window.xmlhttprequest){//火狐
xmlhttpreq=new xmlhttprequest();
}else{
/* if(window.activexobject){
xmlhttpreq=neww activexobject("microsoft.xmlhttp");
//例如ie有很多版本，不一定能创建出来这个对象，所以要添加以下一个判断
//换一种方法，保证创建
if(!xmlhttp){
xmlhttpreq=new activeobject("msxml2.xmlhttp");
}
} */
//一定要如下格式写 上述格式火狐ie亲测不好使
try { //ie
xmlhttpreq = new activexobject("microsoft.xmlhttp");
}
catch (e) {
try {//ie 浏览器
xmlhttpreq = new activexobject("msxml2.xmlhttp");
}
catch (e) {
}
}
}
return xmlhttpreq;
}
//失去焦点的时候
function keywordblur(){
//要获得body的元素长度，才能知道要遍历多少次
var contenttablebody=document.getelementbyid("content_table_body");
var size=contenttablebody.childnodes.length;
//因为是删除子节点，所以是从后往前才能删，同二叉树，删除子节点
for(var i=size-1;i>=0;i--){
contenttablebody.removechild(contenttablebody.childnodes[i]);
}
document.getelementbyid("popdiv").style.border="none";
}
</script>
<style type="text/css">
/* #mydiv{
position: absolute;
left:30%;
top:50%;
margin-left: 100px;
} */
.mouseover{
background: #708090;
color: #fffafa;
}
.mouseout{
background: #fffafa;
color: #000000;
}
</style>
</head>
<body>
<div id="mydiv">
<!-- 输入框 -->
<input type="text" id="keyword" size="50" onblur="keywordblur()" onkeyup="getmore()" onfocus="getmore()"/>
<input type="button" value="百度一下" wise="50px">
<!-- 下面是内容展示的区域 -->
<div id="popdiv">
<table id="contenttable" bgcolor="#fffafa" border="0" cellpadding="0" cellspacing="0">
<tbody id="content_table_body">
<!-- 这个是动态查询出来的数据显示的地方 -->
<!-- <tr><td>ajax1</td></tr>
<tr><td>ajax2</td></tr>
<tr><td>ajax3</td></tr> -->
</tbody>
</table>
</div>
</div>
</body>
</html>
searchservlet.class
package com.ninka;
import java.io.ioexception;
import java.util.arraylist;
import java.util.list;
import javax.servlet.servletexception;
import javax.servlet.http.httpservlet;
import javax.servlet.http.httpservletrequest;
import javax.servlet.http.httpservletresponse;
import net.sf.json.jsonarray;
public class searchservlet extends httpservlet{
static list<string> datas = new arraylist<string>();
static{
datas.add("ajax1");
datas.add("ajax2");
datas.add("ajax3");
datas.add("bichi1");
datas.add("bichi2");
datas.add("php");
datas.add("javascript");
datas.add("java");
datas.add("html");
}
@override
protected void doget(httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
//设置下编码格式
request.setcharacterencoding("utf-8");
response.setcharacterencoding("utf-8");
system.out.println("123");
//首先获得客户端传来的数据,,注意传过来的参数关键字一定要写对，否则会空指针异常
string keyword = request.getparameter("keyword");
//获得关键字之后进行处理，得到关联数据
list<string> listdata = getdata(keyword);
//返回json格式
system.out.println(jsonarray.fromobject(listdata));
//jsonarray.fromobject(listdata);
response.getwriter().write(jsonarray.fromobject(listdata).tostring());
}
//获得关联数据方法
public list<string> getdata(string keyword){
list<string> list = new arraylist<string>();
for(string data:datas){
//如果传递过来的数据，属于词库里面的话，那么就把包含关键词的数据打包成list，向客户端传
if(data.contains(keyword)){
list.add(data);
}
}
return list;
}
}
web.xml
<?xml version="1.0" encoding="utf-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemalocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="webapp_id" version="3.1"> <display-name>ajaxtest</display-name> <welcome-file-list> <welcome-file>search.jsp</welcome-file> </welcome-file-list> <servlet> <!-- 为什么要用search？因为在js中定义url的时候写的是search --> <servlet-name>search</servlet-name> <servlet-class>com.ninka.searchservlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>search</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
以上所述是小编给大家介绍的servlet+ajax实现智能搜索框智能提示功能，希望对大家有所帮助