无刷新提示框-dwr版

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title> ajax无刷新提示 </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 type="text/css" >
		body{font:11px arial;}
		.suggest_link{
			background-color:#ffffff;
			padding:2px 6px 2px 6px;
			text-decoration:none;
		}
		.suggest_link_over{
			background-color:#e8f2fe;
			padding:2px 6px 2px 6px;
			text-decoration:none;
		}
		#suggest{
			position:absulute;
			background-color:#ffffff;
			text-align:left;
			border:1px solid #000000;
			display:none;
		}
	a{text-decoration:none;color:black;}
	</style>
	<script type="text/javascript" src="dwr/interface/cd.js"></script>
	<script type="text/javascript" src="dwr/engine.js"></script>
	<script type="text/javascript" src="dwr/util.js"></script>
	
	<script type="text/javascript">
	
	
	function getList()
	{
		var str=document.getElementById("txtsearch").value;
		cd.search(str,lists);
	}
	//回调函数
	function lists(data)
	{
		var suggest=""; 
		if(data.length!=0)
		{
			if(data[0]!="wu")
			{
				for(var i=0;i<data.length;i++)
				{
					var sobj=document.getElementById("suggest");
						sobj.innerHTML="";
					suggest+="<div onmouseover='javascript:suggestOver(this);'"
								suggest+=" id='div"+(i+1)+"'";
								suggest+=" onmouseout='javascript:suggestOut(this);'"
								suggest+=" style='cursor:hand;' onclick='pw(this.innerHTML);'";
								suggest+=" class='suggest_link'>"+data[i]+"</div>";
				}
				sobj.innerHTML=suggest;
				document.getElementById("suggest").style.display="block";
			}
			else{
				document.getElementById("suggest").style.display="none";
			}
		}
		
		
	}
	
	
	//添加样式表
	function suggestOver(obj)
	{
		obj.className="suggest_link_over";
	}
	//添加样式表
	function suggestOut(obj)
	{
		obj.className="suggest_link";
	}
	//获取数据
	function pw(obj)
	{
		var strs=obj;
		document.getElementById("txtsearch").value=strs;
		document.getElementById("suggest").style.display="none";
	}
	//搜索文本框失去焦点时候获取焦点
	function searchs()
	{
		document.getElementById("txtsearch").focus();
	}
	//加载的时候让搜索文本框获得焦点
	function load()
	{
		searchs();
	}
	window.onload=load;
	</script>
  </head>
  
  <body>
    <h3>Ajax实现搜索提示</h3>
    <div style="width:500px">
    	<form method="post" action="" id="formsearch">
    		<input type="text" onblur="searchs()" id="txtsearch" name="txtSearch" onkeyup="getList()" autocomplete="off" />
    		<input type="submit" id="cmdSearch" name="cmdSearch" value="搜索" />
    		<div id="suggest" style="width:200px;"></div>
    	</form>
    </div>
  </body>
</html>
 
use master
go
create database test
go
use test
go
create table ta
(
	temp varchar(50) not null
)
go
insert into ta values('java')
insert into ta values('java ee')
insert into ta values('java se')
insert into ta values('java me')
insert into ta values('i')
insert into ta values('h')
insert into ta values('g')
insert into ta values('f')
insert into ta values('e')
insert into ta values('d')
insert into ta values('c')
insert into ta values('b')
insert into ta values('a')
insert into ta values('o')
insert into ta values('n')
insert into ta values('m')
insert into ta values('l')
insert into ta values('k')
insert into ta values('p')
insert into ta values('q')
insert into ta values('r')
insert into ta values('s')
insert into ta values('t')
insert into ta values('x')
insert into ta values('w')
insert into ta values('v')
insert into ta values('u')
insert into ta values('y')
insert into ta values('z')
go
select distinct(temp) from ta where temp like '[Object]%' order by temp
 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">

<dwr>

	<allow>
		<create creator="new" javascript="cd">
			<param name="class" value="dao.search"></param>
			<include method="search" />
		</create>
	</allow>
	<signatures>
		<![CDATA[
			import java.util.List;
			import java.dao.search;
		]]>
	</signatures>
</dwr>
 
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	version="2.5">
	<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>
 
package dao;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

public class search {

	public static final String DATA_USERNAME = "";
	public static final String DATA_PASSWORD = "";

	public List<String> search(String str) {
		Connection conn = null;
		Statement st = null;
		ResultSet rs = null;
		List<String> strList = new ArrayList<String>();
		try {
			if (str != null & str.length() > 0) {
				Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
				String url = "jdbc:sqlserver://localhost:1433;databaseName=test";
				conn = DriverManager.getConnection(url, DATA_USERNAME, DATA_PASSWORD);
				st = conn.createStatement();
				String sql = "select distinct(temp) from ta where temp like '" + str + "%' order by temp";
				rs = st.executeQuery(sql);
				while (rs.next()) {
					strList.add(rs.getString("temp"));
				}

			} else {
				strList.add("wu");
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (rs != null) {
					rs.close();
				}
				if (st != null) {
					st.close();
				}
				if (conn != null) {
					conn.close();
				}
			} catch (SQLException e) {
				e.printStackTrace();
			}

		}
		return strList;
	}
}

commons-logging-1.1.1.jar
dwr.jar
sqlserver2008.jar

你可能感兴趣的:(JavaScript,autocomplete,DWR)