uniapp项目中搜索框的实现

<template>
    <view class="container">
        <view class="f1">
            <uni-icons @click="goBack" type="back" size="50rpx" color="#fff"></uni-icons>
            <uni-search-bar class='search' v-model="utitle" @confirm="doConfirm" @input="doInput" placeholder="请输入搜索内容"/>
        </view>
        
        <view class="f2">
            <text class="no-data" v-show="onshow">没有搜索到相关商品</text>
            <uni-list>
                <uni-list-item 
                v-for="(p,i) in plist"
                :key="i"
                :thumb="p.ucover"
                thumbSize="lg"
                :ellipsis="1"
                :to="`/pages/list/list?uid=${p.uid}`"
                link
                :title="p.utitle"></uni-list-item>
            </uni-list>
        </view>
        
        <view class="f3">
            <uni-card title="搜索建议" is-full>
                <uni-tag class='tag' @click='utitle="我的团长我的团"' text="我的团长我的团" type="error" circle></uni-tag>
                <uni-tag class='tag' @click='utitle="中国远征军"' text="中国远征军" type="warning" inverted></uni-tag>
                <uni-tag class='tag' @click='utitle="平凡的世界"' text="平凡的世界" type="primary"></uni-tag>
                <uni-tag class='tag' @click='utitle="父母爱情"' text="父母爱情" type="default" circle></uni-tag>
                <uni-tag class='tag' @click='utitle="鸡毛飞上天"' text="鸡毛飞上天" type="error" inverted></uni-tag>
                <uni-tag class='tag' @click='utitle="战狼"' text="战狼" type="warning"></uni-tag>
                <uni-tag class='tag' @click='utitle="长津湖"' text="长津湖" type="primary" inverted circle></uni-tag>
                <uni-tag class='tag' @click='utitle="长津湖之水门桥"' text="长津湖之水门桥" type="default"></uni-tag>
                <uni-tag class='tag' @click='utitle="金刚川"' text="金刚川" type="error" circle></uni-tag>
                <uni-tag class='tag' @click='utitle="攀登者"' text="攀登者" type="warning" inverted></uni-tag>
                <uni-tag class='tag' @click='utitle="仙剑奇侠传"' text="仙剑奇侠传" type="primary"></uni-tag>
                <uni-tag class='tag' @click='utitle="完美世界"' text="完美世界" type="default" inverted circle></uni-tag>
                <uni-tag class='tag' @click='utitle="武动乾坤"' text="武动乾坤" type="error"></uni-tag>
                <uni-tag class='tag' @click='utitle="剑来"' text="剑来" type="warning"></uni-tag>
                <uni-tag class='tag' @click='utitle="雪中悍刀行"' text="雪中悍刀行" type="primary" inverted circle></uni-tag>
            </uni-card>
        </view>   
    </view>
</template>

<script>
import { searchLoad } from '../../service'
    export default {
        data() {
            return {
                utitle:'',
                plist:[],
                timer:null,//防抖
                onshow:false
            }
        },
        methods: {
            goBack(){
                uni.navigateBack()
            },
            doInput(){
                if(this.timer){
                    clearTimeout(this.timer)
                    this.timer=null
                }
                let utitle=this.utitle.trim()
                if(!utitle){
                    this.plist=[],
                    this.onshow=false
                    return
                }
            },
            async doConfirm(){
                let utitle=this.utitle.trim()
                // console.log(utitle)
                if(!utitle){
                    uni.showToast({
                        title:'搜索内容不能为空',
                        icon:'error'
                    })
                    return
                }
                let data=await searchLoad(utitle)
                console.log(data);
                if(data.length>0){
                    this.plist=data
                    this.onshow=false
                }else{
                    this.plist=[]
                    this.onshow=true
                }
                
            },
        }
    }
</script>

<style lang="scss">
.f1{
    padding-top: 50rpx;
    background-color: #0550cd;
    display: flex;
    align-items: center;
        
    .search{
        margin-left: -10rpx;
        flex: 1;
    }
}
.f2{
    .no-data{
        display: inline-block;
        height: 80rpx;
        line-height: 80rpx;
        display: flex;
        justify-content: center;
    }
}
.f3{
    margin-top: 10rpx;
    
    .tag{
        display: inline-block;
        margin-top: 10rpx;
        margin-right: 15rpx;
    }
}
</style>