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 UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
使用jquery实现轮播图效果
Jan 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
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
js查错流程归纳
2012/05/04 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
Python新手入门最容易犯的错误总结
2017/04/24 Python
django之session与分页(实例讲解)
2017/11/13 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
解决pycharm启动后总是不停的updating indices...indexing的问题
2019/11/27 Python
python实现贪吃蛇双人大战
2020/04/18 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
Pycharm Git 设置方法
2020/09/15 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
一个SQL面试题
2014/08/21 面试题
会计专业毕业生推荐信
2013/11/05 职场文书
仓管员岗位职责
2015/02/03 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL