前端搜索功能（四）

最新推荐文章于 2024-05-09 09:25:52 发布
最新推荐文章于 2024-05-09 09:25:52 发布
阅读量842 收藏 2
点赞数
分类专栏： jQuery 文章标签： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/M_SSY/article/details/80492476
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--查询输入框-->
		<div class="taskBlock"><input class="inputPhoto inputBox" type="text"></div>
		<!--模糊查询代码体-->
		<div class="inQuire">
			<ul class="inQuireUl">
				<li><span class="inQuireID">1011</span><span class="inQuireName">张三</span><span class="inQuireBig">ZS</span><span class="inQuireSmall">zhangshan</span></li>
				<li><span class="inQuireID">1012</span><span class="inQuireName">李四</span><span class="inQuireBig">LS</span><span class="inQuireSmall">lisi</span></li>
				<li><span class="inQuireID">1013</span><span class="inQuireName">王五</span><span class="inQuireBig">WW</span><span class="inQuireSmall">wangwu</span></li>
			</ul>
		</div>
		<!--模糊查询代码体 END-->
	</body>
</html>
<script src="../jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/****模糊查询****/
	$(".inputPhoto").on("focus", function() {
		var that = $(this);
		//显示列表
		$(".inQuire").show();
		//输入实时查询事件，propertychange是IE的输入监听事件，input是其它浏览器
		$(".inputPhoto").on("input propertychange", function() {
			$(".inQuire li")
				.hide()
				.filter(":contains('" + that.val().toLocaleLowerCase() + "')") //小写
				.show();
		});
	});
	/****模糊查询  END****/
</script>

M_SSY
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery过滤器之:contains()、.filter()
weixin_34377919的博客
08-17 570
:contains 选择器选取包含指定字符串的元素。 该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。 经常与其他元素/选择器一起使用，来选择指定的组中包含指定文本的元素，如： $("p:contains(is)") 表示选择所有包含 "is" 的 <p> 元素。 再如： $("p:contains(张三)") 或 $("p:contains("张三")")...
前端搜索功能的简单实现
nunumaymax的博客
10-18 1万+
用js完成前端的搜索功能前言js 前言 有的时候，后台并没有提供搜索功能的cgi供前端使用去搜索用户想要查找的内容，这个时候就需要我们前端自己对所有数据进行过滤处理，筛选出与用户搜索内容相匹配的数据进行显示。 js 通常使用原生中的indexOf方法进行数据筛选，代码如下： //search_data:过滤后的数据 //$scope.all_data:从后台获取到的所有数据 //$scope...
【Vue入门实践3】不调后端接口==＞el-table单纯前端实现查询和重置功能==＞【el-table组件使用】表格静态前端筛选、查询重置功能
最新发布
2401_84433924的博客
05-09 376
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总},三、前端假查询重置功能1. el-form表单
Vue前端：几种搜索框功能实现
qq_46119575的博客
01-04 1万+
Vue前端：几种搜索框功能实现
浏览器前端数据快速检索
xiaoxiangzi123的专栏
02-08 1399
我相信很多人Web开发人员都遇到过前端数据联想输入的问题。 例如：百度搜索时会联想出你想要检索的信息。 像这样的需求可能还是相当比较简单的，因为这种输入一般输入的速度并不是很快，通过keyup+ajax是可以满足要求的。 但是如果是财务软件，或者专有软件，普通办公人员都习惯使用小键盘进行快速输入。这个时候用keyup + ajax很多情况下就很难满足用户的需要了。而且用户的输入速度很快，无形中就会增加ajax发送的次数，对数据库查询和应用服务器都会产生不必要的负载压力。 那有没有相对较好的快速检索的方法呢
前端实时搜索功能
热门推荐
weixin_36079296的博客
04-17 1万+
**大部分页面都具备搜索功能。而作为前端，我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户，具体实现如下：** 1.基本布局：<div class="searcher"> <p class="searcher-main"> <i><img src="img/icon/icon-search-map.png"/></i>
vue编写前端搜索功能
07-11
在Vue.js框架中实现前端搜索功能是现代Web应用开发中的常见需求。Vue.js是一个轻量级的JavaScript库，以其响应式数据绑定和组件化特性深受开发者喜爱。在本篇文章中，我们将深入探讨如何利用Vue.js来创建一个强大的...
jQuery实现的简单前端搜索功能示例
10-19
主要介绍了jQuery实现的简单前端搜索功能,涉及jQuery事件响应与页面元素遍历、匹配、动态设置等相关操作技巧,需要的朋友可以参考下
JavaScript实现前端实时搜索功能
10-20
主要为大家详细介绍了JavaScript实现前端实时搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现前端页面的搜索功能
10-18
首先，前端搜索功能通常涉及到用户的输入事件。在这个例子中，通过监听输入框`<input>`的`onkeyup`事件，当用户在输入框中键入内容时，触发名为`ck`的函数。输入框的ID为`campus`，这使得我们可以通过`document....
前端实现 input 回车搜索（html,vue,react实现）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
04-17 5715
前端实现 input 回车搜索（html,vue,react实现） form表单实现 keyup监听实现
前端实现搜索框筛选
weixin_51140082的博客
02-05 686
里面还做文本操作隐藏，鼠标移上显示全部，方法在我之前的文章有介绍。是一个input输入框和一个button按钮组成输入框查询。treeDatas是页面返回来的数据。
前端 js实现模糊搜索
q4717529的博客
02-16 5593
前端 js实现模糊搜索
前端实现关键词搜索
qq_39321234的博客
12-18 861
思路是通过点击不同的选择项给keyword赋不同的值，来展示不同的关键词选择框，属于是代码写的很傻，但是很好用的那种。图片这里不清晰，哪次我把服务跑起来再更新图片。
前端实现搜索功能
qq_37635012的博客
01-09 813
为了实现上面的效果，初始数据originList，页面上展示的数据myOriginList，选中的数据selectArr，是否全选中checkAll，实现思路是点击搜索按钮后，触发search方法，先判断输入框是否有搜索词，区别处理，如果有搜索词的话，先拷贝一份源数据originList，也就是先拷贝一份初始数据，然后通过数组的filter+includes方法实现过滤，将过滤后得到的数组回显到页面myOriginList上，然后取消全选checkAll设为false。
前后端实现搜索选项进行搜索功能（时间段、用户名、类型）
LY_LM的博客
12-29 1338
趁着没忘，记下来！！！记下来！！记下来！！
web前端之vue搜索功能
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
04-21 3374
web前端之vue搜索功能
js前端检索框的实现
5年编程经验的老猿。
06-13 7061
在前端搜索框实现检索功能，之前检索查询在项目中常规的写法是通过把用户输入的值传到后台接收，然后通过持久层连接数据库，根据SQL语句模糊查询，然后回值给前端页面，这次给大家分享一下不用通过后台直接在前台实现检索查询。...
前端页面实现搜索
qq_69775429的博客
04-23 475
this.user=this.userGgList 数据操作时总是进行= ，应该使用this.user=JSON.parse(JSON.stringify(this.userGgList))进行数据操作。数组方法不熟悉，最开始使用的findIndex只能进行精确搜索，不能实现模糊搜索，没有想到其他方法，以及数组方法的返回值也不够熟悉，建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。的内置方法之一，用于查找指定元素在数组中的索引位置。找到元素返回元素的索引值，找不到返回-1；
前端搜索功能实现代码
05-27
以下是一个简单的前端搜索功能的实现代码示例： HTML 代码： ```html <input type="text" id="searchInput" placeholder="输入关键词进行搜索"> <ul id="list"> <li>苹果</li> <li>香蕉</li> <li>橙子</li> <li>西瓜</li> <li>芒果</li> <li>草莓</li> </ul> ``` JavaScript 代码： ```javascript const searchInput = document.getElementById('searchInput'); const list = document.getElementById('list'); const items = list.getElementsByTagName('li'); searchInput.addEventListener('input', function() { const keyword = this.value.trim().toLowerCase(); for (let i = 0; i < items.length; i++) { const item = items[i]; const text = item.textContent.trim().toLowerCase(); if (text.includes(keyword)) { item.style.display = 'block'; } else { item.style.display = 'none'; } } }); ``` 这段代码实现了对一个简单的无序列表进行搜索的功能。当用户在搜索框中输入关键词时，JavaScript 代码会遍历列表中的每个数据项，并判断是否包含该关键词。如果包含，则显示该项；否则，隐藏该项。需要注意的是，这里的搜索是区分大小写的，如果需要实现不区分大小写的搜索，可以将所有的文本都转换为小写字母再进行比较。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值