使用JQuery完成仿百度的信息提示
2018-03-18 14:56
453 查看
使用JQuery完成仿百度的信息提示
1、需求分析
在一个搜索页面中,键盘输入一些信息,在文本框下面给出一些提示信息(需要从服务器端进行查询的)。2、步骤分析
1、创建一个数据库和表:2、设计一个页面
3、文本框绑定一个事件.keyup
4、在keyup所触发函数中:
(1)获得文本框的值.
(2)将这个值异步提交到服务器.$.post();
(3)提交到Servlet:
a.接收参数:
b.调用业务层–调用DAO: select * from .. Where xx like ?;
c.查询之后页面跳转把数据显示到一个表格中.
3、代码实现
(1)创建数据库和表
CREATE TABLE words( id INT PRIMARY KEY AUTO_INCREMENT, word VARCHAR(20) );
数据库表内容如图所示:
(2)设计一个页面
<center> <div> <h1>百度搜索</h1> <div> <input name="kw" id="tid"><input type="button" value="百度一下"> </div> <div id="did" style="border: 1px solid red;width: 171px;position:relative;left:-34px;display:none"></div> </div> </center>
(3)为文本框绑定事件:编写jquery代码
$(function(){ //文本框keyup的时候发送ajax $("#tid").keyup(function(){ //获取文本框的值 var $value=$(this).val(); //内容为空的时候不发送ajax if($value!= null && $value!=''){ //清空div $("#did").html(""); $.post("/day15/searchKw","kw="+$value,function(d){ //不为空的时候切割字符串 if(d!=''){ var arr=d.split(","); $(arr).each(function(){ //alert(this); //可以将每一个值放入一个div 将其内部插入到id为did的div中 $("#did").append($("<div>"+this+"</div>")); }); //将div显示 $("#did").show(); } }); }else{ //内容为空的时候 将div隐藏 $("#did").hide(); } }); })
4、实现结果
输入a后,下面额文本框会给出提示信息。想要具体demo的小伙伴可以给我留言哦~~
相关文章推荐
- 不错的JQuery屏幕居中提示信息封装,使用方便,可集成到项目
- jsp中使用Jquery autocomplete plugin 读取远程数据,实现信息智能提示
- 使用jQuery实现input的灰色提示信息
- 不错的JQuery屏幕居中提示信息封装,使用方便,可集成到项目
- 【表单提示建议/自动完成功能】jquery autocomplete插件的使用及其改进
- 不错的JQuery屏幕居中提示信息封装,使用方便,可集成到项目
- 不错的JQuery屏幕居中提示信息封装,使用方便,可集成到项目
- jsp中使用Jquery autocomplete plugin 读取远程数据,实现信息智能提示 .
- jquery 小插件,完成“输入字段预期值的提示信息”,防html5 placeholder属性
- jquery validate插件的参考使用 checkbox、radio提示信息如何添加
- 使用jquery的autocomplete实现类似百度的输入提示
- 使用jQuery实现input的灰色提示信息
- 使用JavaScript在网页中弹出提示信息
- vs2008中使用JQuery智能提示
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
- jQuery 中插件的使用与开发---附全部源码(含 jQuery1.3.2 for VS 的智能提示js文件)
- jQuery 中插件的使用与开发---附全部源码(含 jQuery1.3.2 for VS 的智能提示js文件)
- jQuery 中插件的使用与开发---附全部源码(含 jQuery1.3.2 for VS 的智能提示js文件)
- 如何在使用了updatepanel后弹出提示信息
- 转帖:vs2008使用jquery智能提示