您的位置：首页 > 数据库 > Oracle

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

2011-10-18 14:29 363 查看

简单的模仿：

        文本框中输入内容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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： google jsp oracle ajax xmlhttprequest function

相关文章推荐

新的分享

章节导航