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实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
js常用代码段整理
2011/11/30 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
JS实现留言板功能
2017/06/17 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
对Django外键关系的描述
2019/07/26 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
Lucene推荐的分页方式是什么?
2015/12/07 面试题
幼儿园教师教育感言
2014/02/28 职场文书
高中教师评语大全
2014/04/25 职场文书
护士求职信范文
2014/05/24 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书