本文共 719 字，大约阅读时间需要 2 分钟。

业务场景涉及前端与后端的协同工作。用户通过输入框对后端返回的数据进行模糊筛选，筛选结果会在页面的指定容器内展示。

例如，接口返回的数据格式如下：

[
  { id: 1, name: "课程1" },
  { id: 2, name: "课程2" },
  { id: 3, name: "续报" }
]

当用户在输入框输入“续报”时，页面展示的结果为：

续报

输入“课程”时，结果显示为：

课程1 和 课程2

在前端实现方面，用户可以使用Vue.js框架来完成。但是在实际操作中，建议遵循以下步骤：

代码示例如下：

const vm = new Vue({
  data() {
    return {
      input: '', // 输入框的值
      recommendedOrders: [] // 展示的结果
    }
  },
  methods: {
    validateCounts() {
      const value = this.input || '';
      // 根据接口返回的数据进行筛选
      const temp = (this.recommendedOrdersBack || []).filter(item => 
        item.name.indexOf(value) > -1
      );
      this.recommendedOrders = [...temp];
    }
  }
});

在实现过程中，需要注意以下几点：

• 输入框的布局和样式设计
• 筛选逻辑的高效性
• 结果的展示方式
• ploArrow