jQuery-App输入框实现实时搜索


Posted in jQuery onNovember 19, 2020

本文实例为大家分享了jQuery-App输入框实现实时搜索的具体代码,供大家参考,具体内容如下

1、实现实时搜索

其实原理就是很简单,实时获取输入框的值即可,并且对不同情况操作进行不同处理。

2、这里只贴出主要事件语句代码,具体一些操作要视具体情况而定

// 监听搜索框的内容变化 实现实时搜索
 $(".searchContent").bind("input propertychange change", function () {
  studentName = $(".searchContent").val();
  var searchContent = $(".searchContent").val();
  if (searchContent.length > 0) {
  $(".clearSearchContent").removeClass("none");
  $(".clearSearchContent").on("click", function () {
   $(".searchContent").val("");
   studentName = $(".searchContent").val();
   pageIndex = 1;
   $(".clearSearchContent").addClass("none");
   $(".searchContent").focus();
  })
  }
 });
 // 搜索框失去焦点时 如果搜索框没有内容则恢复搜索前状况 如果有内容则搜索
 $(".searchContent").on("blur", function () {
  if ($(".searchContent").val().length == 0) {
  $(".searchContent").attr("placeholder", "搜索");
  $(".searchContent").css("background-image", "url(./res/png/magnify.png)");
  $(".cancelSearchBtn").addClass("none");
  $(".searchImg").addClass("none");
  } else {
  studentName = $(".searchContent").val();
  
 })
 //搜索框获得焦点时,并且搜索框有内容的时候,出现打叉,打叉可以清空搜索框内容并加载全部请假单
 $(".searchContent").on("focus", function () {
  $(".searchContent").attr("placeholder", "");
  $(".searchContent").css("background-image", "");
  $(".searchImg").removeClass("none");
  var searchContent = $(".searchContent").val();
  if (searchContent.length > 0) {
  $(".clearSearchContent").removeClass("none");
  $(".clearSearchContent").on("click", function () {
   $(".searchContent").val("");
  });
  }
 });

 // 当滑动请假单列表时 输入框失去焦点 则隐藏输入键盘和填写请假单的按钮
 $(document).scroll(function () {
  if ($(".searchContent").is(":focus")) {
  $(".searchContent").blur();
  }
 });

 // 点击手机键盘的搜索/开始按钮进行搜索
 $(document).keydown(function (event) {
  if (event.keyCode == 84 || event.keyCode == 13) {
  studentName = $(".searchContent").val();
  pageIndex = 1;
  if (mineManagement) {
   inquireMyManageClassesList(pageIndex);
  } else {
   loadData(pageIndex);
  }
  }
 });

 // 点击取消 情况搜索框的输入内容 并加载全部请假单
 $(".cancelSearchBtn").on("click", function () {
  $(".searchContent").val("");
  $(".searchContent").attr("placeholder", "搜索");
  $(".searchContent").css("background-image", "url(./res/png/magnify.png)")
  $(".cancelSearchBtn").addClass("none");
  $(".searchImg").addClass("none");
  studentName = "";
  
 });

 // 点击搜索图标进行搜索
 $(".searchImg").on("click", function () {
  studentName = $(".searchContent").val();
  pageIndex = 1;
 
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
基于jQuery实现瀑布流页面
Apr 11 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现简单全选框
Sep 13 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 #jQuery
如何在vue 中引入使用jquery
Nov 10 #jQuery
jquery实现加载更多"转圈圈"效果(示例代码)
Nov 09 #jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
Jquery Fade用法详解
Nov 06 #jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
You might like
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
PHP打印输出函数汇总
2016/08/28 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
python 基于wx实现音乐播放
2020/11/24 Python
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
店长岗位职责
2013/11/21 职场文书
少儿节目主持串词
2014/04/02 职场文书
大型公益活动策划方案
2014/08/20 职场文书
老乡聚会通知
2015/04/23 职场文书
农业项目合作意向书
2015/05/08 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
关于Vue中的options选项
2022/03/22 Vue.js
详解SQL的窗口函数
2022/04/21 Oracle