模糊搜索，就是当你在搜索一个东西的时候，打出来一个关键字就可以去搜索出来相对应的哪一条
首先先写出来我们的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) }
希望这个功能可以给大家带来帮助
