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

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

介绍通过输入框对已经渲染好的list列表进行过滤（搜索）的功能
如图所示：

代码段

<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进行渲染。
渲染后的效果如图：

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

【el-table在表格外的input输入框输入内容实时查询出表格相应数据】
@el-table在表格外的input输入框输入内容实时查询出表格相应数据项目场景: 最近遇到一个需求,需要在查询框输入内容时实时查询出表格数据具体实现方法: <template>&l ...
苹果App Store将推出搜索标签功能，App查找更精准
App Store上已经拥有超过200万款应用,为了更好的方便用户搜索,苹果正在测试"标签"快捷搜索功能,让搜索结果更精准一些. 最近几周,一些iPhone用户使用App Stor ...
如何在input输入框中加一个搜索的小图片_前端开发困难重重，如何把握机会学习？...
第3天[form表单] 主要内容 Form表单表单元素表单元素的属性 HTML5新增type类型 HTML新增属性学习目标一.Form表单表单在 Web 网页中用来给访问者填写信息,从而能采 ...
如何在input输入框中加一个搜索的小图片_仿淘宝搜索栏
1.写入元素内容结构 <form ><input name="keyword" type="text"/><span>< ...
简单实现敏感词过滤功能
现在基本所有的网页都存在敏感词过滤的功能,最近开发项目的时候,需要一个敏感词过滤的功能,参考了很多博客,便对此做了总结和自己的开发代码. 一.构建敏感词库读取文件数据,并保存到HashMap中,构建 ...
css3搜索框呼出键盘,移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: 但要实现点击键盘右下角搜索,来发送请求,js代码如下( ...
接口测试平台番外：正交工具过滤功能-3 （难到爆炸）
好的本节我们就来简单实现下这个过滤功能. 一:前端弄个多行文本框,让用户输入过滤规则用. 现在界面是这样的.虽然说不好看,但是我用渐变色给它美化一下就变成这样了蓝色和粉色,我称之为神仙颜色- 不 ...
input输入框实时搜索匹配
实时搜索功能最终效果如下:当是英文输入或数字时,每次输入都会触发,但当是中文输入法时,只有在选中文字后才会触发,类似百度搜索 (以react为例) <input value={searchVa ...
js实时监听input输入框值的变化以便即使匹配搜索项
问题说明在含有搜索框的网页中,经常需要及时匹配搜索项,因此需要监听input输入框的变化事件.如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,除了监听 ...

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

代码段

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

最新文章

热门文章

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

代码段

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

最新文章

热门文章

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

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