servlet+ajax搜索框提示

来源：互联网发布：文学名著阅读软件编辑：程序博客网时间：2024/05/20 11:19

<%@ 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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>智能搜索框提示</title><script type="text/javascript" src="<%=request.getContextPath()%>/js/myindex.js"></script><link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/myindex.css"></head><body>  <div id="mydiv">     <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()"/>    <input type="button" value="百度一下" width="50px"/>        <!-- 内容展示区 -->    <div id="popDiv">        <table id="content_table" bgcolor="#ffafa" border="0" cellpadding="0" cellspacing="0">          <tbody id="content_table_body">                      </tbody>        </table>    </div>      </div></body></html>

/** * 获得用户输入内容的关联信息 */var xmlhttp;function getMoreContents(){//获得用户输入的valuevar content=document.getElementById("keyword").value;if(content==""){clearContent();return;}//给服务器发送用户输入的内容。ajax异步加载//使用xmlhttp对象 xmlhttp=createXMLHttp();//给服务器发送数据 var url="search?keyword="+escape(content); //true表示异步发送 xmlhttp.open("GET",url,true); //xmlhttp响应 xmlhttp.onreadystatechange=callback;  xmlhttp.send(null);}//获取XMLHttp对象方法function createXMLHttp(){if(window.XMLHttpRequest){//浏览器的兼容xmlhttp=new XMLHttpRequest();}else{//IE6以下的xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}return xmlhttp;}//回调函数function callback(){ if(xmlhttp.readyState==4){ if(xmlhttp.status==200){ //文本格式var result=xmlhttp.responseText;//解析获得数据var json=eval("("+result+")");//动态显示到输入框setContent(json); } }}//设置关联数据的展示function setContent(contents){//清空数据  clearContent();  //设置关联数据与文本框的宽度一样    setLocation();//获得内容的长度，确定生成trvar size=contents.length;for ( var i = 0; i < size; i++) {var nextNode=contents[i];//代表json格式的第i个元素var tr=document.createElement("tr");//创建一个<tr>var td=document.createElement("td");td.setAttribute("border", 0);td.setAttribute("bgcolor", "#fffafa");//鼠标样式td.onmouseover=function(){this.className='mouseOver';}td.onmouseout=function(){this.className='mouseOut';}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;//输入框宽度"500px";var left=content["offsetLeft"];//左边框距离var top=content["offsetTop"]+content.offsetHeight;//顶部//显示数据的DIVvar popDiv=document.getElementById("popDiv");popDiv.style.border="black 1px soild";popDiv.style.left=left+"px";popDiv.style.top=top+"px";popDiv.style.width=width+"px";document.getElementById("content_table").style.width=width+"px";}

@CHARSET "UTF-8";#mydiv{position: absolute;left:50%;top:50%;margin-left: -200px;margin-top: -50xp;}#keyword{width:500px;height: 25px;}.mouseOver{background: #708090;color:#fffafa;}.mouseOut{background: #fffafa;color:#000000;}

package cn.lanz.test;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("ajax");datas.add("php");datas.add("javascript");datas.add("java");datas.add("html");}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");//获得客户端数据 String keyword=req.getParameter("keyword"); //进行处理 List<String> listData=getData(keyword); //返回json// JSONArray.fromObject(listData); System.out.println(JSONArray.fromObject(listData));  resp.getWriter().write(JSONArray.fromObject(listData).toString()); }public List<String> getData(String keyword){List<String> list=new ArrayList<String>();for (String data : datas) {if(data.contains(keyword)){list.add(data);}}return list;}}

commons-beanutils-1.7.0.jarcommons-collections-3.2.1.jarcommons-httpclient-3.1.jarcommons-lang-2.3.jarcommons-logging-1.1.1.jarezmorph-1.0.3.jarjson-lib-2.2.3-jdk15.jar

0 0