首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery quickSearch 插件在点击提交按钮时触发,而不是在输入上绑定事件

jQuery quickSearch 插件是一个用于快速搜索和过滤列表的 jQuery 插件。它可以在用户输入时实时过滤列表项,并在用户点击提交按钮时触发搜索。

要在点击提交按钮时触发 quickSearch 插件,可以使用以下代码:

代码语言:javascript
复制
$("#search-input").quickSearch("#list-items", {
  delay: 100,
  onBefore: function() {
    // 在搜索开始之前执行的代码
  },
  onAfter: function() {
    // 在搜索完成之后执行的代码
  },
  selector: function(query) {
    // 在这里编写自定义的搜索逻辑
    return $(this).find("li").not("#list-items li.hidden");
  },
  noResults: "#no-results",
  bind: "keyup",
  show: function() {
    // 在显示列表项之前执行的代码
  },
  hide: function() {
    // 在隐藏列表项之前执行的代码
  },
  prepareQuery: function(val) {
    // 在这里编写自定义的查询准备逻辑
    return val.toLowerCase().replace(/^\s+/, "").replace(/\s+$/, "");
  },
  testQuery: function(query, txt, _row) {
    // 在这里编写自定义的查询测试逻辑
    return txt.toLowerCase().indexOf(query) != -1;
  }
});

$("#search-btn").click(function() {
  $("#search-input").trigger("keyup");
});

在上面的代码中,我们首先使用 quickSearch 插件初始化搜索功能,并在初始化时指定了一些选项,例如延迟时间、搜索前后的回调函数等。然后,我们使用 jQuery 的 click 事件绑定方法,在点击提交按钮时触发搜索。

这样,当用户点击提交按钮时,quickSearch 插件将会触发搜索,并根据用户输入过滤列表项。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Java 进阶篇】深入浅出:JQuery 事件绑定的奇妙世界

在前端的世界里,事件是不可或缺的一部分。用户的点击输入、滚动等行为都触发着各种事件如何在代码中捕捉并处理这些事件是每位前端开发者必须掌握的技能之一。...事件绑定是指在特定的 HTML 元素设置一个监听器,用于捕捉用户触发事件(比如点击输入、鼠标移动等),并执行相应的操作。 JQuery 中,事件绑定通常使用 on 方法来完成。...这只是其中的一小部分,实际 JQuery 提供了丰富的事件类型,以满足不同场景的需求。 事件处理函数 JQuery 中,事件处理函数是事件触发执行的函数。...某些情况下,我们希望阻止事件冒泡,以防止事件触发到不想被触发的元素 JQuery 中,可以使用 stopPropagation 方法来阻止事件冒泡。...当按钮点击,会触发按钮点击事件,同时会触发内层元素和外层元素的点击事件

17510

硬核解析,巧用案例学习jQuery框架三种事件绑定方式

jquery框架的使用中,难免会遇到按钮或文本框等各种各样的要求要进行相应事件绑定操作,进行事件绑定能够增加页面的交互效果,相信html和js中进行事件绑定大家都不陌生,那么今天我就来和小伙伴们分享一下利用...一、 jquery标准的绑定方式 Jquery框架的标准绑定的语法是: jq对象.事件方法(回调函数); 如: Jquery对象.cilck();点击事件 Jquery对象.mouseover();鼠标移入时触发...Jquery对象.mouseout();鼠标移出触发 表单对象.submit();//让表单提交*** 在这里需要注意:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...如下面的实例:鼠标移入时触发弹窗,移出触发弹窗事件。 <!...语法格式如下: jq对象.off("事件名称") 注意:如果off方法不传递任何参数,则将组件的所有事件全部解绑, 如下面的实例:为第一个按钮绑定一个弹窗事件点击按钮触发弹窗,点击第二个按钮,解除第一个按钮的弹窗事件

1.9K10
  • jQuery」基础 - 03

    ():事件触发 1.2.1 事件处理 on() 绑定事件 因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind()、live()、delegate()/on()等,其中最好用的是...因为ul中的li是JS动态创建的,页面加载Docoment中并没有此元素,选择器并不能选取。...事件处理 off() 解绑事件 当某个事件上面的逻辑,特定需求下不需要的时候,可以把该事件的逻辑移除,这个过程我们称为事件解绑。...事件处理 trigger() 自动触发事件 有些时候,在某些特定的条件下,我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。...可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发

    2.8K30

    4-Jquery学习四-事件操作

    12,triggerHandler triggerHandler()函数用于每个匹配元素触发指定类型的事件。...4-triggerHandler()的返回值是对应事件处理函数的返回值,不是当前jQuery对象本身。...(可以绑定多个,触发按照绑定顺序依次执行): focusin是支持冒泡的,当我们把鼠标光标放入文本框,该事件冒泡传递到父元素p,因此可以p元素触发focusin事件。...它与mouseleave事件相似,但mouseleave事件只会在鼠标离开当前元素触发mouseout事件会在鼠标离开当前元素及其任何后代元素触发(换句话说,mouseout事件支持冒泡)。...35,mousedown 36,mouseup mousedown事件会在鼠标按钮被按下触发。mouseup事件会在按下鼠标按钮并释放触发

    4.5K90

    jQuery

    script> //冒泡的意思就是因为html可以嵌套,如果你给儿子标签绑定了点事件或者没有绑定点击事件,父级标签绑定点击事件,那么你一点击子标签,不管子标签 有没有绑定事件,都会触发父级标签的点击事件...,如果有,会先触发子标签的点击事件,然后触发父级标签的点击事件,不管子标签有没有点击事件,都会一级一级的还往上找点击事件 //所以我们要阻止这种事件冒泡 $("span").click(function...//但是这里注意一点,你console.log(this);你会发现this还是触发事件的那个子标签,这个记住昂 // 删除按钮绑定事件 }) 页面载入     当DOM载入就绪可以查询及操纵绑定一个要执行的函数...给模态框中的提交按钮绑定一个data $('#submit').data('xyh', $currentTr); }) 插件...多用于插件开发者向 jQuery 中添加新函数使用。

    8.9K20

    JavaWeb——JQuery之高级操作应用及实践案例总结(动画、遍历、事件绑定

    "fast"、"normal"、"slow")或表示动画时长的毫秒值; 2)easing:用来指定切换效果,默认是"swing",效果是先慢,中间快,最后又慢;参数"linear",匀速; 3)fn:动画完成执行的函数...事件绑定 JQuery事件绑定方式包括: 1)JQuery标准的绑定方式:JQuery对象.事件方法(回调函数);注意:如果调用事件方法,不传递回调参数,会触发浏览器默认行为; 2)on绑定事件、off...解除绑定JQuery对象.on("事件名称",回调函数)、JQuery对象.off("事件名称");注意:若off方法不传递任何参数,则会将组件所有的事件解除; 3)事件切换toggle:JQuery...,当点击对应组件,会执行fn1,再次点击会执行fn2...,若只有2个,则循环执行。注意:JQuery1.9后该功能删除了,要使用的话引入jquery-migrate-1.0.0.js插件。...text" value="绑定点击事件"> 【练习案例2】:on绑定事件、off解除绑定 <!

    9.4K20

    02-老马jQuery教程-jQuery事件处理

    按钮被按下,会发生该事件。它发生在当前获得焦点的元素。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。...1.4 触发这些简单事件 1.4.1 直接调用jQuery包装对象的简单绑定事件方法 $('#btn').click(); // 触发点击事件 $('#btn').dbclick(); // 触发双击事件...第二,只触发jQuery对象集合中第一个元素的事件处理函数。 第三,这个方法的返回的是事件处理函数的返回值,不是据有可链性的jQuery对象。...说明:选择元素绑定一个或多个事件事件处理函数。...$(function () { // 给按钮绑定多个jQuery事件 // 给按钮绑定点击事件,后面的.和demo就是命名空间 $('#btn').on('click.demo', function

    2.7K80

    JQuery快速入门

    不是json提交,需要注意(通常调用接口,使用json提交页面的ajax请求,推荐使用form提交,会比较简单)。...jQuery中,通常事件绑定是通过bind(type[,data],fn)方法实现的,其第一个参数为事件类型,非常丰富,包括blur,focus,load,resize,unload,click,dblclick...事件冒泡就是当页面上有个元素,其中一个嵌套在另一个中,如果均绑定了click事件,那么触发内层元素的click事件,会同时触发外部的click事件。...这样的机制在有时是需要的,但有时却不是期望的,那么就绪要通过event.stopPropagation()方法来禁止事件的冒泡了, 此外,jQuery中,可以通过event.preventDefault...需要注意的,jQuery实际对event进行了封装,以屏蔽不同浏览器的差异,event.target用于获取触发事件的元素,.relatedTarget获取相关元素(mouseover,mouseout

    2.6K100

    jQuery基础(五)一Ajax应用与常用插件-imooc

    ()方法是绑定Ajax事件。...({options}) 其中form参数表示表单元素名称,options参数表示调用方法的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置 例如,当点击表单中的“提交按钮,调用validate...为调用插件方法的配置对象 jQuery Autocomplete 使用详细说明 例如,当用户文本框输入内容,调用搜索插件的autocomplete()方法返回与输入内容相匹配的字符串数据,显示文本框下...例如,当点击提交按钮,如果文本框中的内容为空,则通过dialog插件弹出提示框,提示输入内容不能为空,如下图所示: 浏览器中显示的效果: 3-7菜单工具插件——menu 菜单工具插件可以通过...3-8微调按钮插件——spinner 微调按钮插件不仅能在文本框中直接输入数值,还可以通过点击输入框右侧的上下按钮修改输入框的值,还支持键盘的上下方向键改变输入值,调用格式如下: $(selector)

    16.5K20

    jQuery进阶前言

    前言: jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。...一、鼠标事件: 1、点击事件click()和dbclick(): 点击事件,就是当用户点击鼠标该响应的动作,click是单击,dbclick是双击。...(function() { alert("鼠标弹起来了"); }); 当鼠标点击触发按下去的时候,会弹出mousedown的内容,松手的时候会弹出mouseup的内容。...4、submit()事件: 这个是表单提交事件提交表单触发。...比如一般的网站登录的时候要输验证码,当你输完验证码,就会立即提示验证码正确还是错误,不需要点击“登录”按钮后再去判断,这就用到了Ajax。接下来就看看如何使用。

    2.4K20

    前端成神之路-03_jQuery

    03 - jQuery 学习目标: 能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件 能够说出 jQuery...(): 事件触发 1.2.1 事件处理 on() 绑定事件 ​ 因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()...事件处理 off() 解绑事件 ​ 当某个事件上面的逻辑,特定需求下不需要的时候,可以把该事件的逻辑移除,这个过程我们称为事件解绑。...事件处理 trigger() 自动触发事件 ​ 有些时候,在某些特定的条件下,我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。...可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ; 语法 ?

    3K20

    02-老马jQuery教程-jQuery事件处理

    按钮被按下,会发生该事件。它发生在当前获得焦点的元素。 不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。...}); 1.4 触发这些简单事件 1.4.1 直接调用jQuery包装对象的简单绑定事件方法 $('#btn').click(); // 触发点击事件 $('#btn').dbclick...第二,只触发jQuery对象集合中第一个元素的事件处理函数。 第三,这个方法的返回的是事件处理函数的返回值,不是据有可链性的jQuery对象。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)选择元素绑定一个或多个事件事件处理函数。...$(function () { // 给按钮绑定多个jQuery事件 // 给按钮绑定点击事件,后面的.和demo就是命名空间 $('#btn').on('click.demo', function

    6.4K00

    一文深入JQuery

    3.0 版本之后提供的方式 事件绑定 jquery标准的绑定方式 on绑定事件/off解除绑定 事件切换:toggle 案例 广告显示和隐藏 抽奖 插件:增强JQuery的功能 实现方式: 动画...或表示动画时长的毫秒数值(如:1000) easing:用来指定切换效果,默认是"swing",可用参数"linear" swing:动画执行时效果是 先慢,中间快,最后又慢 linear:动画执行时速度是匀速的 fn:动画完成执行的函数...for(元素对象 of 容器对象) 事件绑定 jquery标准的绑定方式 jq对象.事件方法(回调函数); 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...表单对象.submit();//让表单提交 on绑定事件/off解除绑定 jq对象.on(“事件名称”,回调函数) jq对象.off(“事件名称”) 如果off方法不传递任何参数,则将组件的所有事件全部解绑...给结束按钮绑定单击事件 $("#stopID").click(function () { //处理按钮是否可以使用的效果 $("#startID").prop("disabled"

    3.3K30

    jQuery笔记(4)

    事件处理 on()绑定事件 优势1: on()方法匹配元素绑定一个或多个事件事件处理函数 语法: element.on(events, [selector], fn) events: 一个或多个用空格分割的事件类型...事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素 就算点击每个li元素也会弹出警示框 on()方法优势3: 动态创建的元素,click()没有办法绑定事件...本文由“壹伴编辑器”提供技术支持 自动触发事件 trigger() 有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致.可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发....拷贝到...) object1: 待拷贝到对一个对象的对象(被拷贝) 浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象 深拷贝,前面加true,完全克隆(拷贝的对象,不是地址...jQuery插件 图片懒加载

    41420

    【Java 进阶篇】深入理解 JQuery 事件绑定:标准方式

    事件是指用户页面上进行的操作,比如点击、鼠标移动、键盘输入等。事件绑定则是将特定的 JavaScript 代码与页面上的某个事件相关联,以便在事件发生执行相应的操作。...当按钮点击,回调函数内的代码就会执行,弹出一个提示框。 标准方式:事件代理 有时候,我们需要在动态生成的元素绑定事件,这时候事件代理就派上用场了。...,将点击事件绑定到了 ul 元素,但指定了只有 li 元素被点击触发回调函数。...当鼠标悬停或按钮点击,都会触发相应的回调函数。 标准方式:解绑事件 除了绑定事件,有时我们也需要在之后解绑事件,以避免不必要的执行。...通过将事件绑定到父元素,然后利用事件冒泡原理,父元素捕获事件并判断具体触发事件的子元素,从而减少了事件绑定的数量。 <!

    18040

    Jquery 触发器之treigger()方法简介

    trigger是个很神奇的东西,它可以模拟简单的用户输入操作。并触发点击click, mouseover, keydown 等事件....具体使用方法如下: $("button").click(function(){ $("button2").trigger("click"); }); 当点击button,触发button2的click...使用trigger()方法是可以触发执行元素并用trigger绑定的方法,当然也会触发执行元素的默认行为,如submit按钮提交表单的行为;这里有一个特列,那就是超链接的click的不会被触发...此外很重要的一点是你触发绑定事件同时,还可以为改事件传递参数。 Jquery1.3版本开始  trigger()开始支持事件冒泡,可以传递到dom树上。...eventObject   ---Object类型一个Event对象,用于触发传入该对象的事件处理函数。 返回值:trigger()函数的返回值为jQuery类型,返回当前jQuery对象本身。

    86390

    SSM框架版本的CRM项目实战教程【crm客户管理系统】

    比如给创建市场活动按钮绑定事件、还有最重要的pageList()方法,即:分页操作。一起来学习吧!...就是原来的jsp页面的,查询条件的文本框的内容是form表单里面的,而且这个时候的type属性是submit,必须要把他改成button,不然点的时候,他最后都会提交一张没有任何参数的表单,而且是在你触发了你的按钮的...click方法之后才提交的,导致你最后查询条件里面输入什么都不好使,因为最终查出来的肯定是没有任何条件的数据。...5.隐藏域的使用 上面处理完之后,还处在一些问题: 问题1: 查询框中输入内容,不点击查询按钮 点击分页按钮 结果为查询框中的内容生效了 问题2: 查询框中输入内容,点击查询按钮 再在查询框中输入内容...动态生成的元素,我们要以on方法的形式来触发事件 语法: $(需要绑定元素的有效的外层元素).on(绑定事件的方式,需要绑定的元素的jquery对象,回调函数) $("#activityBody").on

    1.7K50

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    活动推荐

      运营活动

      活动名称
      广告关闭
      领券