页面模仿oracle,用Ajax+Jsp+Oracle对google自动完成的模仿

简单的模仿：

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

1、jsp文件原代码 search.jsp

google自动补全

#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;

}

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

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");

}

}

}

google自动补全

---

请输入查询内容

内容：

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 contents = new ArrayList();

@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配置文件源代码

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/j2eehttp://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

myServlet

com.test.ajax.SearchServlet

myServlet

/SearchServlet.do

search1.2.jsp

4、数据库连接访问数据处理代码(略)