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" οnkeyup="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" οndblclick="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请在网上自行下载

效果如图