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)
}

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