快应用模糊搜索

在这里插入图片描述
在这里插入图片描述
步骤:

  1. 先判断数据是否为空,为空时表明当前数据为空
 <div if="{{memoList.length === 0}}"> </div>
  1. 否则不为空,建立搜索部分和列表部分(在同一个div中)
    html
    <div else> 
    	 搜索部分
    	<div><input  onchange="goSearch()" placeholder="搜索备忘"/></div>
    	 列表部分 
    	<div for="searchList"> 引入列表组件</div> 
    </div>
    
    js
    import { getMemoList, setMemoList } from '../helper/data.js'
    import router from '@system.router'
    
    定义变量
    data() {
      return {
     	memoList: [],  //定义一个备忘数组列表memoList
        searchList: []  //搜索后展现的列表
        }
    }
    
    在当前页面注册并监听事件
    onInit() {
    	// $on 在当前页面 注册事件 并 监听此事件
        this.$on('showPage', this.refreshList)
      },
    
    构建异步函数
    // 使用async将函数标记为异步操作
    // await()会等到异步函数getMemoList调用完成之后直接	返回最终结果给memoList
    //  || [] 表示没有数据时返回空数组,否则会返回null或者undefined,导致页面报错
    // 然后在返回给搜索后的列表searchLis
    async refreshList() {
    	this.memoList = (await getMemoList()) || []
    	this.searchList = this.memoList;
    },
    
    创建搜索功能
     goSearch(e) {
        var value = e.value;
    	//获取源数据
    	var list = this.memoList;
    	// 查找对比
    	// filter过滤器
    	var newData = list.filter(item => {
      	// 根据标题/类型模糊查询(使用 > -1, 使用 == 0 是进行精确查询)
      	//indexOf方法中如果xxx.indexOf("")返回值为0
      	if (item.title.indexOf(value) > -1 || item.label.indexOf(value) > -1) { 
        	return item
      	}
      	return newData
    	})
    	this.searchList = newData;
    	if (value == "") {
      	this.searchList = list;
    	}
    },
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

礼礼。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值