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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 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
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
javascript Object与Function使用
2010/01/11 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python 忽略文件名编码的方法
2020/08/01 Python
python实现计算图形面积
2021/02/22 Python
Html5实现如何在两个div元素之间拖放图像
2013/03/29 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
北京大学自荐信范文
2014/01/28 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
标准版离职证明书
2014/09/12 职场文书
办公室主任岗位职责
2015/01/31 职场文书
跑吧孩子观后感
2015/06/10 职场文书
银行培训心得体会范文
2016/01/09 职场文书
2019军训心得体会
2019/06/27 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书