蓝桥杯前端Web赛道-输入搜索联想

题目链接：1.输入搜索联想 - 蓝桥云课 (lanqiao.cn)

题目要求：

在这里插入图片描述

题目中还包含effect.gif 更详细的说明了需求

那么观察这道题需要做两件事情

把表头的每一个字母进行大写
进行模糊查询

这里我们会用到几个js函数，slice()，includes()，filter()，toUpperCase，toLowerCase

Array.prototype.slice() - JavaScript | MDN (mozilla.org)

Array.prototype.includes() - JavaScript | MDN (mozilla.org)

Array.prototype.filter() - JavaScript | MDN (mozilla.org)

String.prototype.toUpperCase() - JavaScript | MDN (mozilla.org)

String.prototype.toLowerCase() - JavaScript | MDN (mozilla.org)

以上链接可以让大家再复习一下这三个函数的用法，这里我分享一个小技巧，如果你实在记不住对于slice()的用法

可以直接在网页使用f12，在控制台上直接输入代码，会有非常清楚的提示，下面是动画演示，其实其他的函数也可以靠这个方法来试出它的用法，但是前提是你知道过这个函数怎么用，这只是起到一个让记忆回笼的作用

在这里插入图片描述

那么我们先完成第一个要求：将表头的首字母变成大写

思路如下，将原先单词的第一个字母变成大写字母，然后把剩下的字母都拼接在一起

代码如下：

 <td v-for="col in columns">{{col.slice(0,1).toUpperCase() + col.slice(1)}}</td>

在vue里{{}}内部也可以做计算，我们可以直接在原地添加即可，上面的动画已经演示过如何使用技巧取出我们需要的值，这里就不过多赘述。

下一个要求是进行模糊查询，我们可以使用filter()函数，然后利用includes()进行判断的条件，该函数会返回true和false，而filter()也不会影响到原数据内容。

代码如下

<tr v-for="entry in this.data.filter((item)=>item.name.toLowerCase().includes(this.searchQuery.toLowerCase()))"><td v-for="col in columns">{{entry[col]}}</td></tr>

我们可以看到，vue是可以在v-for上直接计算再进行遍历的，为什么要再这个地方进行一次toLowerCase()呢，其实这是题目的一个要求之一，因为题目要求的模糊查询是无视大小写的，所以我们可以“曲线救国”，干脆在进行判断的时候，就把当前需要进行查询的字段name全都变为小写，然后再把输入的内容也都全部变为小写，这样操作也不会让原先的数据变化。

所以只需要判断当前的name是否含有input的内容，如果包含就返回true，然后通过filter函数，找到所有满足这个条件的内容，并把这个内容作为一个数组进行返回，所以我们可以正常的在页面显示

至此达到题目要求，值得注意的是不要忘了在input框对数据进行绑定，不然不会生效哦

  <input placeholder="输入要搜索的名字" v-model="searchQuery"/>

完整代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>输入搜索联想</title><style type="text/css">#app {width: 400px;height: 400px;margin: 50px auto;}table {border-collapse: collapse;border: 1px solid black;margin-top: 20px;}thead tr {background: #4d83d6;color: #fff;}tr td {width: 80px;line-height: 30px;text-align: center;}tbody tr:nth-child(2n) {background: #efefef;}</style><script type="text/javascript" src="./js/vue.js"></script></head><body><div id="app"><!-- TODO：请在下面实现需求 --><span>搜索名字: </span><input placeholder="输入要搜索的名字" v-model="searchQuery"/><table><thead><tr><td v-for="col in columns">{{col.slice(0,1).toUpperCase() + col.slice(1)}}</td></tr></thead><tbody><tr v-for="entry in this.data.filter((item)=>item.name.toLowerCase().includes(this.searchQuery.toLowerCase()))"><td v-for="col in columns">{{entry[col]}}</td></tr></tbody></table></div></body>
</html>
<script>// TODO：请在下面实现需求new Vue({el: "#app",// 注意：请勿修改 data 选项中的数据！！！data: {searchQuery: "",columns: ["name", "gender", "age"],data: [{name: "rick",gender: "male",age: 21,},{name: "demen",gender: "male",age: 26,},{name: "Jack",gender: "male",age: 26,},{name: "John",gender: "female",age: 20,},{name: "Lucy",gender: "female",age: 16,},],},});
</script>