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&g