使用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
使用DWR实现自己主动补全 相似百度搜索框的自己主动显示效果的更多相关文章
- 使用DWR实现自动补全 类似百度搜索框的自动显示效果
使用DWR实现自动补全 自动补全:是指用户在文本框中输入前几个字母或汉字的时候,自动在存放数据的文件或数据库中将所有以这些字母或汉字开头的数据提示给用户供用户选择 在日常上网过程中,我们经常使用搜索引 ...
- 你知道为什么Xcode6中Swift没有智能提示和自己主动补全功能吗 ?
你知道为什么Xcode6中Swift没有智能提示和自己主动补全功能吗 ? 长沙戴维营教育将为你解开这个巨大的谜团大BUG! http://www.ubuntucollege.cn/course/29/ ...
- Archlinux YouCompleteMe+syntastic vim自己主动补全插件,显示缩进和状态栏美化,爽心悦目的vim
Archlinux 安装和配置vim补全插件YouCompleteMe的过程. 參考: https://github.com/Valloric/YouCompleteMe https://github ...
- 辛星深入分析vim的自己主动补全功能以及vim的映射
曾经对于vim的自己主动补全功能,都是须要的时候从网上下载点配置项,然后复制到自己的vimrc上去,自己也不知道是什么意思.结果发现搜索到的非常多自己主动补全的方式都非常另类,有的喜欢在补全大括号的时 ...
- linux下让irb实现代码自己主动补全的功能
我不知道其它系统上irb是否有此功能,可是在ubuntu上ruby2.1.2自带的irb默认是没有代码自己主动补全功能的,这多少让人认为有所不便.事实上加上也非常easy,就是在irb里载入一个模块: ...
- jquery autocomplete文本自己主动补全
文本自己主动补全功能确实非常有用. 先看下简单的效果:(样式不咋会写) 以下介绍几种: 1:jqery-actocomplete.js 这个网上有个写好的实例,上面挺具体的,能够下来执行下就清楚了就不 ...
- Linux下新手怎样将VIM配置成C++编程环境(能够STL自己主动补全)
~ 弄拉老半天,最终弄的几乎相同啦,果然程序猿还是须要有点折腾精神啊. 首先你要安装vim,命令:sudo apt-get install vim vim它仅仅是一个编辑器,它不是IDE(比方code ...
- 更改Scala的代码自己主动补全快捷键code completion
使用Eclipse的代码补全快捷键alt+/已经习惯了.可是IntelJIDEA中这个快捷键组合没有效果,那么我们来改动之,按ctrl+alt+s打开设置界面 之后在keymaps中选择Eclipse ...
- [Android] AutoCompleteTextView:自己主动完毕输入内容的控件(自己主动补全)
AutoCompleteTextView是EditText的直接子类,与普通EditText的最大不同就是.在用户输入的过程中,能够列出可供选择的输入项.方便使用者. AutoCompleteText ...
随机推荐
- android 之 View
在进行游戏开发时,需要自定义各种控件和界面. 自定义View的使用: 绘制屏幕 刷新屏幕:后台数据发生了变化,需要开发人员自己刷新屏幕以显示最新数据 例子: MyView开发,绘制界面View内容: ...
- POJ 3693 Maximum repetition substring ——后缀数组
重复次数最多的字串,我们可以枚举循环节的长度. 然后正反两次LCP,然后发现如果长度%L有剩余的情况时,答案是在一个区间内的. 所以需要找到区间内最小的rk值. 两个后缀数组,四个ST表,$\Thet ...
- BZOJ 3130 [Sdoi2013]费用流 ——网络流
[题目分析] 很容易想到,可以把P放在流量最大的边上的时候最优. 所以二分网络流,判断什么时候可以达到最大流. 流量不一定是整数,所以需要实数二分,整数是会WA的. [代码] #include < ...
- P2949 [USACO09OPEN]工作调度Work Scheduling
题目描述 约翰有太多的工作要做.为了让农场高效运转,他必须靠他的工作赚钱,每项工作花一个单位时间. 他的工作日从0时刻开始,有10^8个单位时间.在任一时刻,他都可以选择编号1~N的N(1 <= ...
- angularjs bootstrap 简介
1.angular特色 数据双向绑定 模块化 var myapp=angular.module... 控制器 myapp.controller(){} 2.bootstrap特色 栅格结构 cs ...
- 树状数组求第K大(From CLJ)
; <<log2[n];p;p>>=) if(a[ret+p]<=kth) kth-=a[ret+=p]; return ret;
- "Javascript高性能动画与页面渲染"笔记
前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗 ...
- 湘潭大学oj 1206 Dormitory's Elevator dp
27153 njczy2010 1206 Accepted 1976 KB 234 MS G++ 1415 B 2014-09-28 10:01:23 真是吐血ac,,,,这么easy的题..... ...
- Python入门--13--递归
什么是递归: 有调用函数自身的行为 有一个正确的返回条件 设置递归的深度: import sys sys.setrecursionlimit(10000) #可以递归一万次 用普通的方法也就是非递归版 ...
- 动态AdvStringGrid完美示例 (AdvStringGrid使用技巧/Cells)
http://www.cnblogs.com/JackSun/archive/2010/12/16/1908104.html 此窗体,只需要简单准备如下,即可运行: 1,添加一个TAdvStri ...