广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery如何实现键盘回车搜索功能
  • 1033
分享到

jQuery如何实现键盘回车搜索功能

2024-04-02 19:04:59 1033人浏览 八月长安
摘要

这篇文章主要为大家展示了“Jquery如何实现键盘回车搜索功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现键盘回车搜索功能”这篇文章吧。前

这篇文章主要为大家展示了“Jquery如何实现键盘回车搜索功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“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如何实现键盘回车搜索功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: jQuery如何实现键盘回车搜索功能

本文链接: https://www.lsjlt.com/news/67586.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery如何实现键盘回车搜索功能
    这篇文章主要为大家展示了“jQuery如何实现键盘回车搜索功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现键盘回车搜索功能”这篇文章吧。前...
    99+
    2022-10-19
  • Vue怎么实现按回车键进行搜索
    这篇“Vue怎么实现按回车键进行搜索”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue怎么实现按回车键进行搜索”文章吧。V...
    99+
    2023-07-05
  • jquery如何实现静态搜索功能
    这篇文章主要为大家展示了“jquery如何实现静态搜索功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery如何实现静态搜索功能”这篇文章吧。效果图:代...
    99+
    2022-10-19
  • Vue按回车键进行搜索的实现方式
    目录Vue按回车键进行搜索第一种方法第二种方法Vue使用回车键失效的解决Vue回车键事件栗子回车失效原因解决方法总结Vue按回车键进行搜索 需求: 为了用户方便进行搜索数据的时候不想...
    99+
    2023-01-14
    Vue按回车键搜索 Vue回车键 Vue搜索
  • php如何实现关键字搜索功能
    这篇文章主要介绍“php如何实现关键字搜索功能”,在日常操作中,相信很多人在php如何实现关键字搜索功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php如何实现关键字搜索功能”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-26
  • php怎么实现关键字搜索功能
    本文操作环境:Windows7系统、PHP7.1版、DELL G3电脑php怎么实现关键字搜索功能?PHP实现关键字搜索后描红功能示例在刚开始学习php的时候,就对搜索过后的关键字描红感到好奇,但是这几天在巩固php基础的时候,就发现原来这...
    99+
    2018-09-10
    PHP 关键字 搜索 描红
  • javaweb搜索功能如何实现
    要实现JavaWeb的搜索功能,可以按照以下步骤进行:1. 建立数据库:创建一个适合存储搜索内容的数据库表。例如,可以创建一个包含标...
    99+
    2023-09-21
    javaweb
  • jQuery UI如何仿淘宝实现搜索下拉列表功能
    这篇文章主要为大家展示了“jQuery UI如何仿淘宝实现搜索下拉列表功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery UI如何仿淘宝实现搜索下拉...
    99+
    2022-10-19
  • vue如何实现搜索小功能
    这篇文章主要介绍vue如何实现搜索小功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下<!DOCTYPE html><html> <head>&nb...
    99+
    2023-06-21
  • vs中如何实现搜索功能
    在VS中实现搜索功能可以通过以下步骤进行:1. 添加搜索框:在界面中添加一个文本框作为搜索框,供用户输入搜索关键字。2. 添加搜索按...
    99+
    2023-08-23
    vs
  • css如何实现带搜索图标的搜索框功能
    这篇文章给大家分享的是有关css如何实现带搜索图标的搜索框功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言给大家分享一下前端用处很多的带小图标的搜索框的制作方法。效果展示基本思路搜索图像用绝对定位放到搜索框...
    99+
    2023-06-08
  • JavaScript实现搜索联想关键字高亮功能
    使用原生js+css+html实现的输入框搜索联想的功能,并集搜索关键字高亮。 完整代码如下: 不需要任何依赖库,粘贴复制即可运行。 <!DOCTYPE html> &...
    99+
    2022-11-13
  • PHP商城中的关键词搜索功能实现
    在现如今的电商时代,搜索功能已成为了电商网站上不可或缺的一部分,能够大大提高用户的购物体验。在PHP商城中,关键词搜索功能更是实现了这个功能的集大成者。本文将从关键词搜索的原理开始,深入探讨PHP商城中的关键词搜索功能实现。一、关键词搜索原...
    99+
    2023-05-22
    PHP 商城 关键词搜索 功能实现
  • Jquery如何实现回车响应事件
    这篇文章将为大家详细讲解有关Jquery如何实现回车响应事件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、情境描述欲实现:文本框中输入字符,点击回车,自动跳到一个新窗...
    99+
    2022-10-19
  • jQuery如何实现回车提交表单
    这篇文章主要为大家展示了“jQuery如何实现回车提交表单”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现回车提交表单”这篇文章吧。回车提交表...
    99+
    2022-10-19
  • web用php如何实现搜索功能
    本篇内容介绍了“web用php如何实现搜索功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!创建搜索表单在网站主页面上添加一个搜索表单,通常...
    99+
    2023-07-05
  • Vue如何实现简单搜索功能
    这篇文章主要讲解了“Vue如何实现简单搜索功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue如何实现简单搜索功能”吧!1、概述在vue项目中,搜索功能是我们经常需要使用的一个场景,最常...
    99+
    2023-07-05
  • 如何使用jQuery实现购物车结算功能
    这篇文章主要介绍如何使用jQuery实现购物车结算功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下<!DOCTYPE html> <html...
    99+
    2022-10-19
  • JavaScript如何实现关键字文本搜索高亮显示功能
    这篇文章将为大家详细讲解有关JavaScript如何实现关键字文本搜索高亮显示功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:<!DOCTYPE&nbs...
    99+
    2022-10-19
  • jQuery如何实现列表检索功能
    这篇文章主要介绍了jQuery如何实现列表检索功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。先给大家展示下效果图: 这是一个简...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作