Dwr框架+Hibernate+Struts2+Spring实现搜索框自动补全功能
第一步创建数据库用户(采用oracle数据库)
--创建用户create user mybook identified by "mybook";
--给用户授权
grant create session to mybook;
grant create table to mybook;
grant create tablespace to mybook;
grant create view to mybook;
grant create sequence to mybook;
grant create any procedure to mybook;
grant debug any procedure to mybook;
grant debug connect session to mybook;
--创建表空间:
create tablespace mybook
datafile 'D:\mybook.dbf'
size 4M
autoextend on next 5M maxsize 60M;
--将用户授权给表空间
alter user mybook default tablespace mybook;
alter user mybook quota unlimited on mybook;
第二步创建数据库表
-- Create table
create table BOOKS
(
ID VARCHAR2(100) not null,
ISBN VARCHAR2(25) not null,
TITLE VARCHAR2(100) not null,
PRICE NUMBER(10,2) not null,
PUBDATE DATE not null,
INTRO LONG not null
)
tablespace mybook
pctfree 10
initrans 1
maxtrans 255
storage
(
initial 64K
minextents 1
maxextents unlimited
);
-- Create/Recreate primary, unique and foreign key constraints
alter table BOOKS
add constraint PK_BOOKS_ID primary key (ID)
using index
tablespace mybook
pctfree 10
initrans 2
maxtrans 255;
第三步给表填充数据
insert into books values('1001','9787121045646','Java优化编程',49.0,to_date('2014-03-14','yyyy-mm-dd'),'Java优化编程');
insert into books values('1002','9787121045647','Java编程思想',59.0,to_date('2014-03-14','yyyy-mm-dd'),'Java编程');
insert into books values('1003','9787121045648','Java并发编程',69.0,to_date('2014-03-14','yyyy-mm-dd'),'Java并发编程');
insert into books values('1004','9787121045649','XML',29.0,to_date('2014-03-14','yyyy-mm-dd'),'可扩展标记语言(XML)是一种新的Web开发辅助语 言,利用它可通过Internet进行信息的描述、交换和 显示。孙更新编著的《XML编程与应用教程(第2版) 》是学习和应用XML语言的实用教材,书中不仅详细 阐述了XML的基本概念、语法规则、文档类型定义、 模式定义、级联样式表、可扩展样式表、与数据库的 集成、文档对象模型,还介绍了XML在Java和.NET中 的编程,最后通过一个综合案例和5个课程实验演示 了XML在实际项目开发中的应用。');
insert into books values('1005','9787121045650','JavaScript',39.0,to_date('2014-03-14','yyyy-mm-dd'),'JavaScript编程');
insert into books values('1006','9787121045651','Java优化编程1',49.0,to_date('2014-03-14','yyyy-mm-dd'),'Java优化编程');
insert into books values('1007','9787121045652','Java编程思想2',59.0,to_date('2014-03-14','yyyy-mm-dd'),'Java编程');
insert into books values('1008','9787121045653','Java并发编程3',69.0,to_date('2014-03-14','yyyy-mm-dd'),'Java并发编程');
insert into books values('1009','9787121045654','XML',29.0,to_date('2014-03-14','yyyy-mm-dd'),'XML编程');
insert into books values('1010','9787121045655','JavaScript高级程序设计(第3版)',39.0,to_date('2014-03-14','yyyy-mm-dd'),'《JavaScript高级程序设计(第3版)》是JavaScript超级畅销书的最新版。ECMAScript5和HTML5在标准之争中双双胜出,使大量专有实现和客户端扩展正式进入规范,同时也为JavaScript增添了很多适应未来发展的新特性。《JavaScript高级程序设计》这一版除增加5章全新内容外,其他章节也有较大幅度的增补和修订,新内容篇幅约占三分之一。全书从JavaScript语言实现的各个组成部分——语言核心、DOM、BOM、事件模型讲起,深入浅出地探讨了面向对象编程、Ajax与Comet服务器端通信,HTML5表单、媒体、Canvas(包括WebGL)及WebWorkers、地理定位、跨文档传递消息、客户端存储(包括IndexedDB)等新API,还介绍了离线应用和与维护、性能、部署相关的最佳开发实践。《JavaScript高级程序设计(第3版)》附录展望了未来的API和ECMAScriptHarmony规范。 《JavaScript高级程序设计(第3版)》适合有一定编程经验的Web应用开发人员阅读,也可作为高校及社会实用技术培训相关专业课程的教材。');
insert into books values('1011','9787121045656','Java优化编程4',49.0,to_date('2014-03-14','yyyy-mm-dd'),'Java优化编程');
insert into books values('1012','9787121045657','Java编程思想5',59.0,to_date('2014-03-14','yyyy-mm-dd'),'Java编程');
insert into books values('1013','9787121045658','Java并发编程6',69.0,to_date('2014-03-14','yyyy-mm-dd'),'Java并发编程');
insert into books values('1014','9787121045659','XML7',29.0,to_date('2014-03-14','yyyy-mm-dd'),'XML编程');
insert into books values('1015','9787121045660','JavaScript8',39.0,to_date('2014-03-14','yyyy-mm-dd'),'JavaScript编程');
commit;
第四步创建一个Web Project项目
叫做MyBook或者其它名字也可以
第五步建立Hibernate连接
第六步将web项目变为Hibernate 并创建包名njci.software.book.util和
njci.software.book.bean
第七步反向生成实体类和配置文件
第八步创建包名结构
第九步编写BookDao类
第十步实现Dao接口并继承HibernateDaoSupport
第十一步可以配置spring和struts2在web.xml所需要的配置文件和在src下创建applicationContext.xml和sturs.xml
<!-- Spring配置 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- 根据默认配置文件来初始化Spring容器,配置Spring监听器 -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- struts2的配置文件开始 -->
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
第十二步创建BookService和BookServiceImpl
BookSercive和BookDao一样
第十三步创建BookAction
第十四步配置struts.xml和applicationContext.xml
第十五步创建list_book.jsp文件用于显示图书信息和搜索框,并在index.jsp放入一个 <a href="findAllBooks">查询书本信息</a>跳转到list_book.jsp
list_book.jsp里面的内容
<div style="width: 800px; margin: 0 auto;">
<div style="margin-bottom: 10px;">
图书名称:<input id="name" type="text" onkeyup="getTitle(event)" style="width: 400px;margin-left: 10px"/><input type="button" value="搜索" class="btn btn-primary" style="width: 100px;margin-left: 10px" />
<div id="dynamicdiv" style="position:absolute; visibility:hidden; top: 26px; left: 345px;_left:185;z-index: 10;">
<select id="sel" style="background:white;width: 400px;" multiple="multiple" ondblclick="getValue();" >
</select>
</div>
</div >
<table class="table table-bordered table-hover" >
<thead>
<tr>
<th>序号</th>
<th>ISBN</th>
<th>书名</th>
<th>单价</th>
<th>出版日期</th>
<th>介绍</th>
</tr>
</thead>
<tbody>
<s:iterator value="list" var="book" status="status">
<tr>
<td><s:property value="#status.count"/></td>
<td><s:property value="isbn"/></td>
<td><s:property value="title"/></td>
<td><s:property value="price"/></td>
<td><s:date name="pubdate" format="yyyy-MM-dd"/></td>
<td><s:property value="intro"/></td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
第十六步创建book.js并引用
function getTitle(evt){
evt=evt||window.event;
if(!$("name").value==''){
var i=$('sel').size;
var j=$('sel').selectedIndex;
if(evt.keyCode=='38'){//方向键
if(j==0){
$('sel').selectedIndex=j;
}else{
$('sel').selectedIndex=j-1;
}
}else if(evt.keyCode=='40'){//下方向键
if(j==(i-1)){
$('sel').selectedIndex=j;
}else{
$('sel').selectedIndex=j+1;
}
}else if(evt.keyCode=='13'){//回车键
if(j!=-1){
$('name').value=$('sel').options[j].innerHTML;
$('dynamicdiv').style.visibility="hidden";
}
}else{
var title=$('name').value;
bookService.findByTitle(title,bookstitlecallback);
}
}else{
$('dynamicdiv').style.visibility="hidden";
}
}
function bookstitlecallback(list){
if(list.length!=0){
$('dynamicdiv').style.visibility="visible";
}else{
$('dynamicdiv').style.visibility="hidden";
return ;
}
$('sel').size=list.length;
dwr.util.removeAllOptions('sel');
dwr.util.addOptions('sel',list,"title","title");
}
function getValue(){
$('name').value=$('sel').options[$('sel').selectedIndex].innerHTML;
$('dynamicdiv').style.visibility='hidden';
}
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/bookService.js"></script>
<script type="text/javascript" src="js/book.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
注意这里的css文件是bootstrap.css请在网上自行下载
效果如图