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

使用DWR实现自动补全

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

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

训练要点：

掌握使用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','3');
INSERT INTO `books` VALUES ('3','1231232','Java核心技术卷','66','2014-06-13','3');
INSERT INTO `books` VALUES ('4','2342','java开发实战经典','33','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反向工程: 切换到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

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

猜你在找的Ajax相关文章

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