uniapp组件uni-search-bar实时搜索内容

最新推荐文章于 2024-06-18 02:24:33 发布

破程序员

最新推荐文章于 2024-06-18 02:24:33 发布

阅读量711

点赞数 1

文章标签： uni-app 前端 html5 vue.js

本文链接：https://blog.csdn.net/m0_60870417/article/details/136365343

版权

<template>
	<view class="">
        <uni-search-bar v-model="Value" @confirm="search" radius="100" placeholder="搜索内容" clearButton="auto" cancelButton="auto" @cancel="clearContent" @clear="clearContent"/>

        <ul class="" >
            <li class="" v-for="item in List" :key="item.id">
                <view class="">{{item.Name}}</view>
            </li>
        </ul>
	</view>
</template>


<script>
    import URL from '../api';
    export default {
        data() {
			    return {
				    List: [], //列表
                    Value:'',		
			    }
		    },
    },
    methods: {
        QuestionList(){
            uni.request({
					url: URL+'/nBank/TypeById',
					method: 'GET',
				}).then((res) => {
					this.List=res.data.data
				});
        },
        // 搜索
		search(e){
			if (this.Value.trim() != '') {
				let newArr=this.clearAfter.filter(item=>{
					if(item.Name.includes(this.Value.trim())){
						return item
					}
				})
				this.List=newArr
			} else {
					uni.showToast({
					title: '请输入搜索内容',
					icon: "none"
				})
			}

		},
       // 清除内容
		clearContent(){
			this.List=this.clearAfter
		}
    },
    watch:{
		// 监听搜索框值的变化
		Value(n, o) {
			console.log(n)
			if(n.trim()==''){
				this.List=this.clearAfter
			}else{
				this.search(n)
			}	
		}
	},
    onShow(){
		this.QuestionList()
	}

秒了，下一个！