使用DWR实现自己主动补全 相似百度搜索框的自己主动显示效果

使用DWR实现自己主动补全

自己主动补全：是指用户在文本框中输入前几个字母或汉字的时候，自己主动在存放数据的文件或数据库中将全部以这些字母或汉字开头的数据提示给用户供用户选择

在日常上网过程中，我们常常使用搜索引擎。当我们输入想要检索的keyword时。搜索引擎会提示我们相关的keyword

训练要点：

掌握使用DWR框架开发Ajax程序

使用MyEclipse 10.0 + MySql5.0

新建数据库：能够手动随便新建一个測试用的

DROP TABLE IF EXISTS `books`;
CREATE TABLE `books` (
  `id` varchar(100) NOT NULL,
  `isbn` varchar(25) default NULL,
  `title` varchar(100) default NULL,
  `price` double default NULL,
  `pubdate` date default NULL,
  `intro` bigint(20) default NULL,
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

随便插入几条数据：

INSERT INTO `books` VALUES ('1', 'BH123', 'java编程思想昂', '55', '2014-06-10', '333');
INSERT INTO `books` VALUES ('2', 'BH23', 'JS实战经典', '22', '2014-06-10', '3');
INSERT INTO `books` VALUES ('3', '1231232', 'Java核心技术卷', '66', '2014-06-13', '3');
INSERT INTO `books` VALUES ('4', '2342', 'java开发实战经典', '33', '2014-06-13', '98');

使用myeclipse 切换到database视图。右击新建一个数据连接

新建web project 项目：BookShop，使用MyEclipse加入SSH支持。

先加Spring支持。选择前四个库AOP，Core，Persistence Core，JDBC 选择spring3.0；

加入dwr的jar包到lib下；

加入hibernate支持。

下一步，选择Spring configuration file

下一步，选择Existing Spring configuration file

下一步选择刚刚配置好的JDBC Driver:mysql。

下一步，不选择 创建SessionFactory；

加入Sturts2支持：

选择struts2.1。下一步记得选择Struts2 Spring包；

在web.xml配置spring 和dwr。

<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>classpath:applicationContext.xml</param-value>
	</context-param>
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>

<servlet>
		<servlet-name>dwr</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</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>

在WEB-INF新建dwr.xml

<?

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 javascript="BooksBiz" creator="spring" scope="application">
			<param name="beanName" value="BooksBiz"></param>
			<include method="findTitle" />
		</create>
		<convert converter="bean" match="com.books.entity.Books" />
		<create creator="new" javascript="validator">
			<param name="class" value="org.apache.struts2.validators.DWRValidator"></param>
		</create>
		<convert converter="bean" match="com.opensymphony.xwork2.ValidationAwareSupport" />
	</allow>
</dwr>

将books反向project: 切换到Database Explorer模式，选择mysql 的books表右击表选择Hibernate Reverse …

在Java package新建包com.books.eneity

说明上面三部：

创建一个hibernate实体配置文件books.hbm.xml

创建一个实体类Books

创建Spring Dao

下一步：

Id策略选择 assigned。

完毕；



将类BooksDao移到com.books.dao;

新建接口BooksBiz在com.books.biz下，加入例如以下方法：

public List<Books> findTitle(String title);

新建实现类BooksBizImpl implements BooksBiz 在com.books.biz.impl下

	private BooksDAO booksDAO;

	public List<Books> findTitle(String title) {
		List<Books> list = booksDAO.findTitle(title);
		return list;
	}

	public void setBooksDAO(BooksDAO booksDAO) {
		this.booksDAO = booksDAO;
	}

在BooksDAO下新建 findTitle方法：

	public List<Books> findTitle(String title2) {
		Query query = this.getSession().createQuery("from Books b where b.title like :title order by b.pubdate desc");
		query.setParameter("title", title2 + "%");
		return query.list();
	}

配置 applicationContext：

头部加入tx和aop支持

	xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:p="http://www.springframework.org/schema/p"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xsi:schemaLocation="
	http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
	http://www.springframework.org/schema/tx
	http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
	http://www.springframework.org/schema/aop
	http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
	">

在</beans>前加入：

<bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager">
		<property name="sessionFactory" ref="sessionFactory"></property>
	</bean>
	<tx:advice transaction-manager="transactionManager" id="txAdvice">
		<tx:attributes>
			<tx:method name="find*" propagation="SUPPORTS" read-only="true" />
			<tx:method name="get*" propagation="SUPPORTS" read-only="true" />
			<tx:method name="*" propagation="REQUIRED" read-only="false" />
		</tx:attributes>
	</tx:advice>

	<aop:config>
		<aop:pointcut expression="execution( * com.books.biz.*.*(..))" id="pointcut" />
		<aop:advisor advice-ref="txAdvice" pointcut-ref="pointcut" />
	</aop:config>

	<bean id="BooksBiz" class="com.books.biz.impl.BooksBizImpl">
		<property name="booksDAO" ref="BooksDAO"></property>
	</bean>

Index.jsp页面

在head以下加：

	<script type='text/javascript' src='dwr/engine.js'></script>
  	<script type='text/javascript' src='dwr/interface/BooksBiz.js'></script>
  	<script type='text/javascript' src='dwr/util.js'></script>
  	<style type="text/css">
  		#sel{
  			position: absolute;
  			top: 34px;
  			left:90px;
  			visibility: hidden;

  		}
  	</style>
  	<script type="text/javascript">
  		function getTitle(){
  			var title=dwr.util.getValue('title');
  			if(title==''){
  				$('sel').style.visibility="hidden";
  				return ;
  			}
  			BooksBiz.findTitle(title,callback);
  		}
  		function callback(list){
  			if(list.length==0){
  				$('sel').style.visibility="hidden";
  				return ;
  			}else{
  				$('sel').style.visibility="visible";
  			}
  			$('sel').size=list.length;
  			dwr.util.removeAllOptions('sel');
  			dwr.util.addOptions('sel',list,"title","title");
  		}
  		function getValue(){
  			$('title').value=$('sel').options[$('sel').selectedIndex].innerHTML;
  			$('sel').style.visibility="hidden";
  		}
  	</script>

  <body>
    图书搜索：<input type="text" id="title"  onkeyup="getTitle()">
    <select id="sel" ondblclick="getValue()" multiple="multiple"></select>
    <input type="button" value="搜 索">
  </body>
</html>

部署执行的时候，会有包冲突。

打开部署的文件夹F:\Java\apache-tomcat-6.0.37\webapps\BookShop\WEB-INF\lib，将里面的jar包拷贝出来 反复的antlr删掉最低版本号的。然后将项目停掉吧我们之前工具导入的jar库都remove。再将拷贝出来的jar们拷贝到lib下；



部署，訪问主页，输入数据库数据 的首个字就有相应数据显示；

源代码下载:

http://pan.baidu.com/s/1eQtJhiq

dwr jar下载：http://pan.baidu.com/s/1o61Auee