简单的模仿:
文本框中输入内容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、数据库连接访问数据处理代码(略)