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实现div跟随鼠标移动
Aug 20 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
JS实现的视频弹幕效果示例
2018/08/17 Javascript
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Python接收手机短信的代码整理
2020/08/02 Python
python从Oracle读取数据生成图表
2020/10/14 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
python中pyqtgraph知识点总结
2021/01/26 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
中专生自我鉴定书范文
2013/12/28 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
同学聚会邀请函
2015/01/30 职场文书
借条如何写
2015/05/26 职场文书
2016新年致辞
2015/08/01 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
MySQL如何解决幻读问题
2021/08/07 MySQL