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

最新推荐文章于 2024-04-22 21:47:07 发布

qinglang1987

最新推荐文章于 2024-04-22 21:47:07 发布

阅读量1.1k

点赞数

分类专栏： Ajax 文章标签： google jsp oracle ajax xmlhttprequest function

本文链接：https://blog.csdn.net/wangxw8746/article/details/6884446

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简单的模仿：

文本框中输入内容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" οnkeyup="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、数据库连接访问数据处理代码(略)

qinglang1987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Ajax+Jsp+Oracle对google自动完成的模仿

简单的模仿：文本框中输入内容content，然后访问数据库中的表contents中的字段content,然后实现自动完成。1、jsp文件原代码 search.jsp google自动补全
复制链接

扫一扫