蓝桥杯前端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>