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

标签：des   style   class   blog   code   java   

使用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', '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');

新建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>

<?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>

创建一个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;
	}	

	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();
	}

头部添加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
	">

<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>

在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>

源码下载:

上课笔记_使用DWR实现自动补全 类似百度搜索框的自动显示效果,布布扣,bubuko.com

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

标签：des   style   class   blog   code   java   

原文地址：http://blog.csdn.net/jerome_s/article/details/30515869