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 EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jQuery实现简单飞机大战
Jul 05 jQuery
jQuery实现简单评论区功能
Oct 26 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/04 咖啡文化
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
Python中os.path用法分析
2015/01/15 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
python 实现网上商城,转账,存取款等功能的信用卡系统
2016/07/15 Python
python生成式的send()方法(详解)
2017/05/08 Python
python 全局变量的import机制介绍
2017/09/07 Python
Python对List中的元素排序的方法
2018/04/01 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python实现拼图小游戏
2020/02/22 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
干部现实表现材料
2014/02/13 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
党务公开方案
2014/05/06 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
六一亲子活动感想
2015/08/07 职场文书
校运会班级霸气口号
2015/12/24 职场文书
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android