input输入框简单的实时搜索（过滤）功能（uni-app）

偏执的太偏执、 2023-10-11 12:28 63阅读 0赞

版权声明：本文为博主原创文章，遵循[ CC 4.0 BY-SA ][CC 4.0 BY-SA]版权协议，转载请附上原文出处链接和本声明  
本文链接：  
[https://blog.csdn.net/qq\_35197283/article/details/101209744][https_blog.csdn.net_qq_35197283_article_details_101209744]

介绍通过输入框对已经渲染好的list列表进行过滤（搜索）的功能  
如图所示：  
![在这里插入图片描述][20190923162209613.png]

## 代码段 ##

<template>
    ...
    	<input v-model="filterText" type="text" placeholder="设备编号,设备名称" ></input>
    	<view class="cu-card case">
    		<navigator
    			@click="linkProject(item.taskId,item.taskStatus)"
    			class="cu-item shadow" 
    			v-for="(item, index) in filterList" 
    			:key="index">
    			<view class="cu-list menu">
    				<view class="cu-item">
    					<view class="content">
    						<text class="text-black">任务单号：</text>
    						<view class="right"><text class="text-grey">{ { item.taskNumber}}</text></view>
    					</view>
    				</view>
    				<view class="cu-item">
    					<view class="content">
    						<text class="text-black">状态：</text>
    						<view class="right"><text class="text-red">{ { item.taskStatus | filter }}</text></view>
    					</view>
    				</view>
    			</view>
    		</navigator>
    	</view>
    ...
    </template>
    <script>
    ...
    	data() { 
    		return { 
    			filterText: '',
    			list: []
    		}
    	},
    	computed:{ 
    		filterList () { 
    			var arr = []
    			this.list.forEach((item) => arr.push(item))
    			if (this.filterText) { 
    				arr = this.list.filter(item => item.taskNumber.includes(this.filterText))
    			}
    			return arr
    		}
    	},
    	...
    </script>

以上代码，主要部分在输入框**v-model** 双向绑定（**filterText**）和**v-for**所渲染的数组（**最初数据list和过滤后数据filterList**）  
**list**是通过后台接口拿到的，所以不展示了。  
再将通过计算属性处理后的**filterList**进行渲染。  
渲染后的效果如图：  
![在这里插入图片描述][20190923164918970.png]

[CC 4.0 BY-SA]: https://creativecommons.org/licenses/by-sa/4.0/
[https_blog.csdn.net_qq_35197283_article_details_101209744]: https://blog.csdn.net/qq_35197283/article/details/101209744
[20190923162209613.png]: https://img-blog.csdnimg.cn/20190923162209613.png
[20190923164918970.png]: https://img-blog.csdnimg.cn/20190923164918970.png