专栏首页凯哥JavaJavaweb-案例练习-2-给搜索框添加提示
原创

Javaweb-案例练习-2-给搜索框添加提示

给搜索框添加搜索提示功能

这篇来利用Ajax做一个给搜索框添加搜索提示的功能,这个我们在百度首页,搜索框随便输入一个字符,就能弹出联想自动,可供用户选择,这篇要做的就是这么一个场景。

1. 需求

添加描述

就是这么一个功能。

2. 文件准备

需求中这个index.jsp中的搜索在我们原来项目中没有这个代码,所以这里先把这个素材拷贝进来。(具体素材在我这个项目github上有)

添加描述

本篇主要是index.jsp和menu_search.jsp这两个文件。在index.jsp中静态包含了menu_search.jsp,代码中,这行代码就是我们前面学习JSP指令学习过的静态包含,是在JSP转换Servlet时引入的文件。

3. 给搜索框添加信息提示框

在mene_search.jsp中,给搜索框先整出一个div框来,宽度和搜索框的宽度一样,为了显示明显,先来给边框添加红色。

在menu_serch.jsp文件底部,添加一个div,代码如下。

<div id="context1" style="border:1px solid red;background-color:white;width:126px;height:100px; position:absolute;left:860px;top:135px;">

</div>

浏览器刷新,看看效果。

添加描述

4. 创建一个空的servlet文件

先创建一个SearchBookAJAXServlet.java,对应的url映射是/searchBookAJAXServlet

这部分代码后面来写。

5. Dao层代码

在BookDao接口文件中,最底部添加这个代码

public List<Object> searchBookByName(String name) throws SQLException;

在BookDaoImpl.java添加对应的具体方法实现代码。

public List<Object> searchBookByName(String name) throws SQLException {

QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());

return qr.query("select name from book where name like ?", new ColumnListHandler<Object>(), "%" +name+"%");

}

6. Service层代码

接着写BookService.java中代码,末尾新增以下代码。

public List<Object> searchBookByName(String name);

然后具体实现代码,在BookServiceImpl.java中末尾添加以下代码。

public List<Object> searchBookByName(String name) {

try {

return bd.searchBookByName(name);

catch (SQLException e) {

e.printStackTrace();

}

return null;

}

7. Servlet文件具体代码

下面是SearchBookAJAXServlet.java的完整代码。

8. 部署测试

部署到tomcat,重启tomcat服务。浏览器打开servlet地址,看看效果

添加描述

这里我数据库看看是不是只有一个j开头的,这样我数据库book表再添加一个javascript看看。

添加描述

这样就是说明代码没有问题了。

9. AJAX查询结果显示在div框中

下面我们来编辑menu_search.jsp文件,这里把文章开头写死div高度给删除,新加了AJAX这一套代码,代码修改如下。

刷新浏览器,看看/index.jsp效果,搜索框输入一个J看看,div框提示的效果。

添加描述

到这里,还有问题没有解决,那就是点击div中提示,不能点击,我们需要点击之后,自动填充到search框。

10. Div中name鼠标悬停变颜色

就是在div提示的name,鼠标悬停,会自动变颜色,例如变成灰色,离开name区域变成原来的白色,来看看这个怎么实现。

上面改动地方在changeBackground_over(div) 和changeBackground_out(div)

刷新浏览器,看看效果。

添加描述

鼠标悬停变成灰色,鼠标离开变成白色,对比看看上面改动的两个这个动作的function就明白了。

11. 解决点击搜索按钮,填充到搜索框

上面为止,我们做到了颜色变化,但是没有点击效果,而且 搜索框不输入的时候,默认div显示的是数据库中全量数据的图书name,这肯定不行。下面代码调整之后,可以点击填充到搜索框,和解决这个搜索框不输入任何字符,提示全量name这个问题。

关于这个代码最后div中,left和top的位置问题,会随着不同浏览器和不同分辨率,这个红色的div框位置有点偏移,这个问题,就不管了。

项目全部代码请看github:

这篇代码的commit message为 “搜索框提示并点击填充完成 ”

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实现websocket的两种方式

    1.两种方式,一种使用tomcat的websocket实现,一种使用spring的websocket

    凯哥Java
  • Javaweb-案例练习-5-商品数量修改和合计金额实现

    前面一篇完成了添加购物的功能,这篇来完善购物车页面上,修改商品数量和小计这两处地方的代码。

    凯哥Java
  • Javaweb-类加载器-类加载器的了解入门

    前面的动态代理学完了,以后在学习Spring的时候会用到这些动态代理的知识和原理,像目标对象,增强这两个术语,会经常听到。学习动态代理,就是学习JDK中反射包下...

    凯哥Java
  • 24. 企业级开发基础5:面向对象特征(封装)

    在我们程序开发过程中,定义好类型之后就可以通过类型来创建对象 如:我们定义一个中华人民共和国公民的类型

    大牧莫邪
  • JavaScript 使用new关键字调用函数

    var friend=new Person("nike", 29, "software engineer");

    授客
  • C++之虚析构

    在继承的时候,父类的指针(或引用)可以指向(引用)子类的对象。如果子类有自己的指针属性,那么就需要将父类的析构函数声明为虚析构函数,否则通过父类指针(或者引用)...

    zy010101
  • 前端面试送命题-JS三座大山

    本篇文章比较适合 3 年以上的前端工作者,JS 三座大山分别指:原型与原型链,作用域及闭包,异步和单线程。

    王小婷
  • JS 中 this上下文对象的使用方式

    JavaScript 有一套完全不同于其它语言的对 this 的处理机制。 在五种不同的情况下 ,this 指向的各不相同。

    书童小二
  • 当查询的数据来自多个数据源,有哪些好的分页策略?

    在业务系统开发中,尤其是后台管理系统,列表页展示的数据来自多个数据源,列表页需要支持分页,怎么解决?

    新亮
  • 前端面试送命题-JS三座大山

    首先创造空的对象,再让this指向这个对象,通过this.name进行赋值,最终返回this,这其实也是new 一个对象的过程。

    用户1093975

扫码关注云+社区

领取腾讯云代金券