uni-app 小程序搜索功能

<template>
  <block class="content">
    <u-search v-model="search" :showAction="true" @clear="resetDate" @search="searchClick()" @custom="searchClick()"
        :animation="false">
    </u-search>
    <view class="view-container">
        <view class="view-item" v-for="(item,index) in showList" :key="index">
            <text :data-url="httpUrl+item.title" @click="downloadFile">
                {{item.title}}
            </text>
        </view>
    </view>
  </block>
</template>

<script>
import dataObject from '@/static/data.js'
export default {
    name:"content",
    data() {
        return {
            search: '',
            httpUrl:'https://xxx.cn',
            showList: [],
            newList: []
        };
    },
    onLoad() {
    
    },
    mounted() {
        this.showList = dataObject.searchDataList;
    },
    methods: {
        searchClick() {
            console.log(this.search);
            if (this.search !== '') {
                this.newList = dataObject.searchDataList.filter(
                    item =>
                    item.title.indexOf(this.search) !== -1 
                );
                if (dataObject.searchDataList) {
                    this.showList = dataObject.searchDataList;
                }
            }
            if (this.newList) {
                this.showList = this.newList;
            }
        },
        resetDate() {
            this.search = "";
            this.showList =dataObject.searchDataList;
        },
        downloadFile(e) {
            let url = e.currentTarget.dataset.url;
            uni.downloadFile({
                url: url,
                success: function(res) {
                    var filePath = res.tempFilePath;
                    uni.openDocument({
                        filePath: filePath,
                        success: function(res) {
                            console.log('打开文档成功')
                        },
                        fail: function(res) {
                            console.log(res);
                        },
                        complete: function(res) {
                            console.log(res);
                        }
                    })
                },
                fail: function(res) {
                    uni.showToast({
                        title: '暂不支持此类型',
                        duration: 2000,
                        icon: "none",
                    });
                },
                complete: function(res) {},
            })
        }
    }
}
</script>

<style>
.u-search {
    width: 80%;
    margin: 60rpx auto !important;
}
.view-container{
width: 90%;
margin:0 auto;
padding-bottom: 40rpx;
}
.view-item{
    padding:40rpx 0;
    border-bottom: 1px solid #ccc;
}
.view-item:first-child{
border-top: 1px solid #ccc;
}
.view-item:last-child{
    border-bottom: none;
}
.view-item text{
    font-size: 14px;
}
</style>