返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/67586.html(转载时请注明来源链接)

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

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

  • 微信公众号

  • 商务合作