jQuery实现键盘回车搜索功能


Posted in jQuery onJuly 25, 2017

本来我一直认为一个搜索没有什么太难做的,直到我接到了上一个项目,让不使用按钮实现搜索这才让我开始在网上寻找这一技术,那么废话少说,将我的源码放上来给大家参考。

前台代码

<div class="fl search-box"> 
     <button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit">搜索</button>
     <input id="sousuo" name="sousuo" type="search" placeholder="输入搜索内容" value="">
</div>

搜索按钮实现

$(function () {
   $("body").on("click", "#btnSubmit", function () {
    var sousuo = $("#sousuo").val();
    if (sousuo == "") { alert("请输入信息"); return false; }
    location.href = "{$:CSSiteUrl}search.html?keywords=" + escape(sousuo);
   });
  });

下面也就是本次的重头戏,键盘回车实现搜索

$('#sousuo').bind('keypress', function (event) { 
   if (event.keyCode == "13") { 
    $("#btnSubmit").click();
   }
  })

或许大家可以发现,其实相当于在回车键event.keyCode == “13”,也就是说键盘的的第13个键码,那么借此帮助,以后想实现其他的按键的话,只要去查询键盘对应的键码就好了。

总结

以上所述是小编给大家介绍的jQuery实现键盘回车搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
基于jquery实现多级菜单效果
Jul 25 #jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 #jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 #jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 #jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 #jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 #jQuery
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
使用 php4 加速 web 传输
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php7下的filesize函数
2019/09/30 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
医学院四年学习生活的自我评价
2013/11/06 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
运动会邀请函范文
2014/02/06 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
建材投资建议书
2014/05/16 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
兵马俑导游词
2015/02/02 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
债务纠纷起诉书
2015/05/20 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android