前端uniap实现搜索功能

一、使用uview实现

1.使用到的组件搜索框<u-search></u-search>

placeholder--搜索框里面的提示文字。@search--回车或者点击搜索时触发的函数

<template>
    <u-search placeholder="搜索" v-model="keyword" @search="searchHistory"></u-search>
</template>

2.申明keyword

3.清空展示数据后通过for循环遍历所有的数据，把需要的内容通过关键字搜索出来放到展示数据里

<script>
export default {
    data() {
        return {
           keyword:''，
           aList：[],//展示的数据
           bList:[]  //所有的数据
        }
    },
    methods: {
       searchHistory(value){
				// value自动接收输入框中的内容
				if (value == ''){
                    //如果输入的值为空则加载所有的列表
					this.getList();
				}else {
					//先清空展示的数据
					this.aList = []
					//然后开始循环全部数据
					for (var i = 0; i < this.bList.length; i++) {
						//判断数据里面是否有符合输入的内容  不符合返回-1 只需要大于或等于0就是符合
						//（核心所在，其它都是根据需求来自己写）
						if (this.bList[i].pullTime.indexOf(value) >= 0) {
							this.aList.push(this.bList[i])
						}
					}
				}
			},
    getList(){
       //向后台发送请求，拿到所有的数据然后赋值给aList和bList
    }
}
</script>

二、通过后端提供接口来实现搜索

 1.使用到的组件搜索框<u-search></u-search>

placeholder--搜索框里面的提示文字。@search--回车或者点击搜索时触发的函数

<template>
    <u-search placeholder="搜索" v-model="keyword" @confirm="getList(true)"></u-search>
</template>

2.把keyword 传给后台进行查询

<script>
export default {
    data() {
        return {
           keyword:''，
           list：[],//展示的数据
           para: {
                pageNumber: 1,  //页数，第一页
                pageSize: 10,   //每页展示的数据数，10条数据
                types: 0        //传给后台的类型（看自己需求）
            },
           isLastPage：false，
        }
    },
    methods: {
       async getList(refresh){
            if (refresh) {
                this.para.pageNumber = 1;
                this.list = [];
                this.isLastPage = false;
            } else {
                this.para.pageNumber++;
            }
            if (this.isLastPage) {
                //页面信息提示，iipKit是自己封装的组件
                this.iipKit.toast('没有更多了');
                return;
            }
            let page = await this.$api.向后台请求数据(para);
            this.list.push(...page.list);
            this.isLastPage = page.lastPage;
    }
}
</script>