JavaScript模糊搜索功能

模糊搜索,就是当你在搜索一个东西的时候,打出来一个关键字就可以去搜索出来相对应的哪一条

首先先写出来我们的html结构:

<div id="div">
			<div>排行榜</div>
			<input type="text" id="input" oninput="inp()" />
			<div id="div1">
				<span class="select">序号</span>
				<span class="select">姓名</span>
				<span class="select" onclick="year()">年龄</span>
			</div>
			<div id="div2" onclick="fn(ppt)">
		</div>
	</div>

然后写出来我们的渲染页面的函数:

//渲染函数,函数名为fn(arr)
function fn(arr) {
	//声明一个空字符串,变量名为str
	let str = ""
	//for循环整个数据
	for (let i = 0; i < arr.length; i++) {
		//在str里进行拼接数据
		str += `<p class="p">
				<span>${i+1}</span>
				<span>${arr[i].name}</span>
				<span>${arr[i].age}</span>	
				</p>`
	}
	div.innerHTML = str
	//用innerHTML渲染在div2里
}

最后就是我们的重头戏:搜索显示出来相对应的数据:

在这里呢,我用到的是oninput事件,搜索当然也可以用onchange事件,都可以实现,但是我们就先讲一下oninput事件:

//搜索oninput事件,函数名为inp
function inp() {
	//用id获取输入框的value,变量名为input
	let input = document.getElementById("input").value
	//创建一个空数组,名为emp
	let emp = []
	//for循环整个数据
	for (let i = 0; i < ppt.length; i++) {
		//判断整个数据的姓名indexOf(input)不等于-1或者整个数据的变成字符串的年龄indexOf(input)不等于-1
		if (ppt[i].name.indexOf(input) != -1 || ppt[i].age.indexOf(input) != -1) {
			//把这个下标的数据push到空数组里
			emp.push(ppt[i])
		}
	}
	fn(emp)
	//渲染函数fn(emp)
}

希望这个功能可以给大家带来帮助

  • 10
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值