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实现图片平滑滚动详解
Mar 22 jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery tip提示插件(实例分享)
Apr 28 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现滚动效果
Nov 17 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现鼠标滑动切换图片
May 27 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 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
JavaScript模板入门介绍
2012/09/26 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
python 除法保留两位小数点的方法
2018/07/16 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
《长相思》听课反思
2014/04/10 职场文书
新闻发布会策划方案
2014/06/12 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
2015暑假假期总结
2015/07/13 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle