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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
JQuery省市联动效果实现过程详解
May 08 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
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
简单说明Python中的装饰器的用法
2015/04/24 Python
简单介绍Python中的struct模块
2015/04/28 Python
Python切换pip安装源的方法详解
2016/11/18 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
医学生职业生涯规划书范文
2014/03/13 职场文书
创卫工作总结2015
2015/04/22 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
JavaScript中reduce()的用法
2022/05/11 Javascript