jQuery实现键盘回车搜索功能
本来我一直认为一个搜索没有什么太难做的,直到我接到了上一个项目,让不使用按钮实现搜索这才让我开始在网上寻找这一技术,那么废话少说,将我的源码放上来给大家参考。
前台代码
<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实现当按下回车键时绑定点击事件
当按下回车键时,绑定按钮点击事件代码如下,通过检测按下的键值,回车键keycode为13,判断是否是回车键,然后完成相应的方法. 复制代码 代码如下: <script> $(function(){ $(document).keydown(function(event){ if(event.keyCode==13){ $("#mouse").click(); } }); $("#mouse").click(function(){ alert("n
-
asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)
首先来看一些效果图: 这个是淘宝首页的搜索效果 京东首页的搜索效果 我修改的jQuery.AutoComplete实现的效果 一.实现效果分析 我要实现的效果就是和GOOGLE类似,需要满足一下3个要求(因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么久了): .首先根据关键字列出关键字相关的信息(包含统计信息) .可以使用键盘上下键选择(默认不选中第一条),文本框内容根据选择信息变换 .当选择第一或者最后一条时再向上或向下则取消选中,文本框中内容还原回原先输入的内容(这点比较重要,京东
-
Jquery 监视按键,按下回车键触发某方法的实现代码
复制代码 代码如下: <script type="text/javascript">$(function () { $('input:text:first').focus(); //把焦点放在第一个文本框 var $inp = $('input'); //所有的input元素$inp.keypress(function (e) { //这里给function一个事件参数命名为e,叫event也行,随意的,e就是IE窗口发生的事件. var key = e.which;
-
jQuery 回车事件enter使用示例
eg: 复制代码 代码如下: //点击enter,用户登陆 $("#txtLoginPwd").keydown(function (e) { if (e.which == 13) { UserLogin(); } }); 注意:是"keydown"而不是"keypress"
-
jQuery实现回车键(Enter)切换文本框焦点的代码实例
以下是实现方法: 复制代码 代码如下: <script src="http://yige.org/static/js/j.js"></script>jQuery(function () { jQuery('input:text:first').focus();//直接定位到当前页面的第一个文本框 var $inp = jQuery('input:text');//所有文本框 $inp.bind('keydown', function (e) {
-
jquery如何扑捉回车键触发的事件
1.jquery捕捉回车键: 复制代码 代码如下: $("html").die().live("keydown",function(event){ if(event.keyCode==13){ //这里添加要处理的逻辑 } }); //绑定回车动作 $('textarea[name=chattext]').keydown(function(event){ if(event.which==13){ } }); 2.jquery获得多个选中的checkbox值: 复制代
-
jQuery实现键盘回车搜索功能
本来我一直认为一个搜索没有什么太难做的,直到我接到了上一个项目,让不使用按钮实现搜索这才让我开始在网上寻找这一技术,那么废话少说,将我的源码放上来给大家参考. 前台代码 <div class="fl search-box"> <button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit">搜索</b
-
jQuery EasyUI tree增加搜索功能的实现方法
扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏. /** * 1)扩展jquery easyui tree的节点检索方法.使用方法如下: * $("#treeId").tree("search", searchText); * 其中,treeId为easyui tree的根UL元素的ID,searchText为检索的文本. * 如果searchText为空或"",将恢复展示所有节点为正常状
-
jQuery实现动态文字搜索功能
先简单讲一下需求:页面中会列出多行个人信息记录,为方便查找,在顶层增加一个搜索栏,可根据用户姓名查找记录. 如果只想查看代码,可跳过分析过程,文章底部提供了完整的代码. 以下是我的编写过程: 动态页面,多条记录均由forEach生成,结构如下: <form name="userForm"> <table style="width:200px;"> <thead> <tr> <th> </th>
-
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信. 一.要引用的文件 要使用jqGrid,首先页面上要引入如下css与js文件. 1.css <link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 2.js <script src='/Scripts/js/jquery-2.
-
使用JS轻松实现ionic调用键盘搜索功能(超实用)
这个需求是产品提的,一开始只是设置了 <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query"> type="search" 发现android上可以ios调取不出search健来,气死我了,经过google的搜索得到结论,需要在外面套用一个form表单,于是加上果然好使而且结合了f
-
Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
最近跳槽去新公司,接受的第一个任务是在 一个电商模块的搜索功能以及搜索历史记录的实现. 需求和淘宝等电商的功能大体差不多,最上面一个搜索框,下面显示搜索历史记录.在EditText里输入要搜索的关键字后,按软键盘的搜索按键/延迟xxxxms后自动搜索.然后将搜索的内容展示给用户/提示用户没有搜到相关信息. 历史记录是按时间排序的,最新的在前面,输入以前搜索过的关键字,例如牛仔裤(本来是第二条),会更新这条记录的时间,下次再看,牛仔裤的排列就在第一位了.并且有清除历史记录的功能. 整理需求,大致需
-
jquery ztree实现树的搜索功能
本文实例分享了jquery ztree实现树的搜索功能,供大家参考,具体内容如下 var userZTree; var userSetting={ check: { enable: true, chkStyle: "radio", chkboxType : {"Y" : "" , "N" : ""}, radioType: "all" }, data: { simpleData: { e
-
jQuery实现的简单前端搜索功能示例
本文实例讲述了jQuery实现的简单前端搜索功能.分享给大家供大家参考,具体如下: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工程轻量化与可靠性技术实验室</title> </head> <body> <div class="content-r
-
jquery实现静态搜索功能(可输入搜索文字)
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery实现静态搜索功能</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/boo
-
JavaScript前端页面搜索功能案例【基于jQuery】
本文实例讲述了JavaScript前端页面搜索功能.分享给大家供大家参考,具体如下: 今天给大家分享一篇关于前端页面搜索的案例,有了这个案例,在表格数据中可以进行快速查找,比在浏览器中使用ctrl+F体验比较好. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面搜索实例</title>
随机推荐
- vue使用stompjs实现mqtt消息推送通知
- autogrow 让FCKeditor高度随内容增加的插件
- jquery zTree异步加载、模糊搜索简单实例分享
- iOS实现二维码的扫描功能
- IOS开发QQ空间/朋友圈类界面的搭建
- Python最基本的数据类型以及对元组的介绍
- js实现权限树的更新权限时的全选全消功能
- Javascript 多物体运动的实现
- php smarty函数扩展
- PHP5中的this,self和parent关键字详解教程
- 通过数组给您的文件排序
- 关于C语言函数strstr()的分析以及实现
- asp.net 编译器错误信息: CS0006: 未能找到元数据文件 该死的.NET
- asp检测是否为中文字符函数
- javascript简单事件处理和with用法介绍
- setInterval,setTimeout与jquery混用的问题
- java shiro实现退出登陆清空缓存
- C#将DataTable转换成list的方法
- Winform窗口实现多显示屏显示的2种方法
- 详解java中接口与抽象类的区别