您的位置：首页 > 其它

Ajax+Servlet实现搜索框的智能提示

2016-12-20 16:41 381 查看 
创建Search.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>搜索框智能提示</title>
<style type="text/css">
#mydiv{
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -50px;
}
.mouseOver{
background: #708090;
color: #FFFAFA;
}
.onmouseOut{
background: #FFFAFA;
color: #000000;
}
</style>
<script type="text/javascript">
//获得用户输入内容的关联信息的函数
var  xmlHttp;
function getMoreContents() {
//获得用户的输入
var content=document.getElementById("keyword");
if(content.value==""){
clearContent();
return ;
}
//然后给服务器发送用户输入的内容  因为我们采用的是ajax异步发送数据 所以我们要使用一个对象  叫XmlHttp对象
xmlHttp=creatXMLHttp();
//向服务器发送数据
var url="/Search?keyword="+escape(content.value);
//true表示JavaScript脚本会在send方法之后继续执行 而不会等待来自服务器的响应
xmlHttp.open("GET",url,true);
//xmlHttp绑定回调方法 这个回调方法会在xmlHttp状态改变的时候被调用
//xmlhttp的状态为0-4 我们只关心4 这个状态 因为当数据传输过程完成之后 再回调方法才有意义
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
function  creatXMLHttp() {
//对于大多数历览器都实用
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
//要考录浏览器的兼容性
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
//回调函数
function callback() {
if(xmlHttp.readyState==4){
//200代表服务器响应成功
//404代表服务器未找到  500代表服务器内部错误
if(xmlHttp.status==200){
//交互成功 获得相应的数据 是文本格式
var result=xmlHttp.responseText;
//解析获得数据
var json=eval("("+result+")");
//获取数据之后 就可以动态的显示这些数据了 吧这些数据展示到输入框的下面
//alert(json);
setContent(json);
}
}
}
//设置关联数据的展示
function setContent(contents) {
//情况数据
clearContent();
setLocation();
//首先获的关联数据的长度 以此来确定生成多少<tr></tr>
var size=contents.length;
//设置内容
for(var i=0;i<size;i++){
var nextNode=contents[i];//代表的是json格式数据的第i个元素
var tr=document.createElement("tr");
var td=document.createElement("td");
//为tr td设置属性
td.setAttribute("border",0);
td.setAttribute("bgcolor","#FFFAFA");
//为每行绑定函数 移上去 移开
td.onmouseover=function () {
this.className='mouseOver';
}
td.onmouseout=function () {
this.className='onmouseOut';
}
td.onclick=function () {
//当点击一个关联数据时  关联数据自动设置为输入框的数据
}
var text=document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}
//清空之前的数据
function clearContent() {
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";
}
//当输入框失去焦点的时候 关联信息清空
function keywordBlur() {
clearContent();
}
//设置关联数据显示的位置
function setLocation() {
var content=document.getElementById("keyword");
var width=content.offsetWidth;
var left=content["offsetLeft"];
var top=content["offsetTop"]+content.offsetHeight;
var popDiv=document.getElementById("popDiv");
popDiv.style.border="black 1px solid";
popDiv.style.left=left+"px";
popDiv.style.top=top+"px";
popDiv.style.width=width+"px";
document.getElementById("content_table").style.width=width+"px";
}
</script>
</head>
<body>
<div id="mydiv">
<!--输入框-->
<input type="text" size="70" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()">
<input type="button" value="百度一下" width="50px">
<!--内容展示的区域-->
<div id="popDiv">
<table id="content_table" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
<tbody id="content_table_body">
<!--动态查询出来的数据显示在这个地方-->
</tbody>
</table>
</div>
</div>
</body>
</html>

创建Servlet

public class SearchServlet extends javax.servlet.http.HttpServlet {
static List<String> datas=new ArrayList<>();
static {
//模拟数据

datas.add("ajax");
datas.add("ajax post");
datas.add("becky");
datas.add("bill");
datas.add("james");
datas.add("jerry");
}
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

}

protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//首先获得客户端发送来的数据keyword
String keyword=request.getParameter("keyword");
//获得关键字过后进行处理 得到关联数据
List<String> listData=getData(keyword);
//返回Json格式
response.getWriter().write(JSONArray.fromObject(listData).toString());
}
//获得关联数据
public List<String> getData(String keyword){
List<String> list=new ArrayList<>();
for (String data:datas){
if(data.contains(keyword)){
list.add(data);
}
}
return list;
}
}
web.xml配置
<servlet>
<servlet-name>SearchServlet</servlet-name>
<servlet-class>com.czmec.servlet.SearchServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>SearchServlet</servlet-name>
<url-pattern>/Search</url-pattern>
</servlet-mapping>


demo下载
http://download.csdn.net/detail/qq_33913037/9716722

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                ajax
                                                servlet
                                                自动提示框
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航