每日一题：输入搜索联想

介绍

实际开发中经常会遇到这样一个需求，根据用户的输入内容，快速在表格中搜索匹配的数据并显示，该功能常被人们叫做“输入搜索联想”。

本题需要在已提供的基础项目中，使用 Vue 2.x 的知识实现该功能。

准备

开始答题前，需要先打开本题的项目文件夹，目录结构如下：

1
2
3
4
├── effect.gif
├── index.html
└── js
    └── vue.js

其中：

  • effect.gif 是最终实现的效果图。
  • js/vue.js 是 Vue 2.x 文件。
  • index.html 是页面布局及功能实现的逻辑代码。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

1
2
cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/10591/09.zip && unzip 09.zip && rm 09.zip

在浏览器中预览 index.html 页面，显示如下所示：

初始效果

当前并未实现搜索联想的功能。

目标

请在 index.html 文件中补全代码，最终实现以下需求：

  1. 页面数据表中表头首字母大写（注意：不能是全大写，请勿修改 data 选项中已提供的数据）。

效果如下：

首字母大写效果

  1. 在搜索输入框中，输入相关单词或字母后（不区分大小写），显示每条数据的 Name 字段中包含该搜索内容的数据列表。

完成后的效果见文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

规定

  • 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
  • 请勿修改项目中提供的 id、class、函数名等名称，以免造成无法判题通过。
  • 请勿修改 data 选项中已提供的数据。

判分标准

  • 本题完全实现题目目标得满分，否则得 0 分。

总通过次数: 206 | 总提交次数: 218 | 通过率: 94.5%

难度: 中等 标签: 蓝桥杯真题, 2022, 省赛, Web 前端, Vue.js

题解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!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 searchData">
            <td v-for="col in columns">{{entry[col]}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
<script>
  // TODO：请在下面实现需求
  new Vue({
    el: "#app",
    // 注意：请勿修改 data 选项中的数据！！！
    // watch: {
    //   searchQuery(newSearchQuery, oldSearchQuery) {
    //     if (newSearchQuery.trim() === '') {
          
    //     } else {
    //        // Filter data based on search query
    //       this.data = this.data.filter(item => {
    //       return item.name.toLowerCase().includes(newSearchQuery.toLowerCase());
    //   });
    //     }
    //   }
    // },
    computed: {
      searchData() {
        return this.data.filter(item => { return item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) })
      }
    },
    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>