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绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery中map函数的两种方式
Apr 07 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php生成随机颜色的方法
2014/11/13 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
浅谈python实现Google翻译PDF,解决换行的问题
2018/11/28 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
你懂得怎么写自荐信吗?
2013/12/27 职场文书
学生自我评价范文
2014/02/02 职场文书
高一学生期末评语
2014/04/25 职场文书
护理专业自荐书
2014/06/04 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
mysql sock文件存储了什么信息
2022/07/15 MySQL