用Ajax+Jsp+Oracle对google自动完成的模仿

wangxiaohigh

浏览: 1429503 次

最近访客更多访客>>

u012363178

innwin

chenglibang

nat2010

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1691)

社区版块

存档分类

2012-04 ( 2)
2011-12 ( 74)
2011-11 ( 268)
更多存档...

简单的模仿：

文本框中输入内容content，然后访问数据库中的表contents中的字段content,然后实现自动完成。

1、jsp文件原代码 search.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google自动补全</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style>
#auto{
position:absolute;
height:auto;
overflow:auto;
display:none;
border:solid 0.5px #808080;
font-size:12px;
color:green;
cursor:pointer;
padding:1px;
}
#message{
background-color:#FFFFC0;
border:solid 0.5px #808080;
height:150px;
}
</style>
<script type="text/javascript">
var xhr;
function search(content){
//如果输入内容为空则返回
if(content == "") return;
//拿到auto的句柄
var auto = document.getElementById("auto");
//向下
if(event.keyCode == 40 && auto.style.display == "block"){
var select = document.getElementById("message");//得到选项卡
select.focus();//选项卡获得焦点
select.selectedIndex = 0;//默认第一个元素被选中
return;
}
auto.style.display = 'none';
//创建XMLHttpRequest对象
createXmlHttp();
//设置回调函数
xhr.onreadystatechange = response;
//初始化
xhr.open('POST',encodeURI('SearchServlet.do?content='+content),true);
//发送请求
xhr.send(null);
}

function response(){
if(xhr.readyState == 4 && xhr.status == 200 ){
var auto = document.getElementById("auto");//拿到auto的句柄
var content = document.getElementById("content");//拿到content的句柄
var select = document.getElementById("message");//拿到message的句柄
select.length = 0;//删除select选项的内容
var s = xhr.responseText;
if(s == ""){
auto.style.display = "none";
return;
}
var contents = s.split(",");//截取字符串
select.size = contents.length;//设置select的size值
select.onkeyup = function(){
content.value = this.value;//select的值为其选中的值
if(event.keyCode == 13){//如果按下回车
this.parentNode.style.display = "none";
}
}
select.onclick = function(){
content.value = this.value;//select的值为其选中的值
this.parentNode.style.display = "none";
}
for(var i=0;i<contents.length;i++){
select.options[i] = new Option(contents[i],contents[i]);
}
//设置auto的位置
var left = content.offsetLeft;
var top = content.offsetTop;
auto.style.left = left;
auto.style.top = top + content.offsetHeight;
auto.style.width = content.offsetWidth;
auto.style.display = 'block';
select.style.width = content.offsetWidth;
}
}

function createXmlHttp(){
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest){
xhr = new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject){
try{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xhr = new ActiveXObject("msxml2.XMLHTTP");
}
}
}
</script>
</head>
<body>
<h1>google自动补全</h1><hr>
<h3>请输入查询内容</h3>
内容：<input type="text" id="content" onkeyup="search(this.value)"/>
<div id="auto"><select id="message"></select></div>
</body>
</html>

2、Servlet实现源代码 SearchServlet.java

package com.test.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.*;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SearchServlet extends HttpServlet {

private static final long serialVersionUID = 1L;
private ContentsService service = new ContentsService();
List<String> contents = new ArrayList<String>();

@SuppressWarnings("unchecked")
public void init() throws ServletException{
contents = service.queryContentsList();
}

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String content = request.getParameter("content");
content = new String(content.getBytes("ISO-8859-1"),"UTF-8");
response.setContentType("test/html;charset=utf-8");
StringBuffer sb = new StringBuffer();
for(String str:contents){
if(str.startsWith(content)){
sb.append(str + ",");
}
}
if(sb.length()>0){
sb.deleteCharAt(sb.length()-1);
}
PrintWriter out = response.getWriter();
out.print(sb.toString());
out.close();
}
}

3、web.xml配置文件源代码

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
<servlet-name>myServlet</servlet-name>
<servlet-class>com.test.ajax.SearchServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>myServlet</servlet-name>
<url-pattern>/SearchServlet.do</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>search1.2.jsp</welcome-file>
</welcome-file-list>
</web-app>