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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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中实现可以返回多个值的函数实例
2015/03/21 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
python正则表达式面试题解答
2020/04/28 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Python实现图片识别加翻译功能
2019/12/26 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
数据库面试要点基本概念
2013/10/31 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
xxx同志考察材料
2014/02/07 职场文书
初中班主任寄语
2014/04/04 职场文书
贺卡寄语大全
2014/04/11 职场文书
倡议书格式
2014/04/14 职场文书
户外活动总结范文
2014/04/30 职场文书
品酒会策划方案
2014/05/26 职场文书
驻村工作简报
2015/07/20 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android