el-input和和filter结合实现实时搜索
<el-input placeholder="请选择日期" clearable prefix-icon="el-icon-search" v-model="input1"></el-input>
<ul class="name-lists">
<li
@click="clickName(item)"
:class="{'active':nameTitle == item.name}"
v-for="item in namelists.filter(data => !input1 || data.name.toLowerCase().includes(input1.toLowerCase()))"
:key="item.id">{{item.name}}</li>
</ul>
data() {
return {
input1: "",
namelists:[{"id":0,"name":"陶凯元"},{"id":1,"name":"张雨绮"},{"id":2,"name":"欧泽高"},{"id":3,"name":"程国祥"},{"id":4,"name":"刘思彤"},{"id":5,"name":"吴仪"},{"id":6,"name":"陈乔恩"},{"id":7,"name":"杨尚昆"},{"id":8,"name":"陈毅"},{"id":9,"name":"王紫娇"},{"id":10,"name":"程潇"},{"id":11,"name":"卜耀东"},{"id":12,"name":"程砚秋"},{"id":13,"name":"张治中"},{"id":14,"name":"甘苦"},{"id":15,"name":"何炅"},{"id":16,"name":"程思远"},{"id":17,"name":"张耀扬"},{"id":18,"name":"甘子玉"},{"id":19,"name":"曹操"},{"id":20,"name":"李俊"},{"id":21,"name":"黄子韬"},{"id":22,"name":"韩金锐"},{"id":23,"name":"阮以伟"},{"id":24,"name":"程思寒"},{"id":25,"name":"陈世炬"},{"id":26,"name":"李光洁"},{"id":27,"name":"徐承栋"},{"id":28,"name":"乔子扬"},{"id":29,"name":"徐才厚"}], }
},
el-input和和filter结合实现实时搜索的更多相关文章
- 用Vue+axios写一个实时搜索
刚刚在学vue,试着写了一个实时搜索文件. 思路:1.input 通过v-model绑定.2.通过watch检测输入结果变化.3根据结果变化从api调用不同的数据. 代码如下: <!DOCTYP ...
- 异步实时搜索jquery select插件
异步实时搜索jquery select插件 一.先看看效果. 二.做此插件的原因. 1.数据量过大(几千.几万条),无法一次性全部加载. 2.现有插件各不相同,无法满足功能需求. 3.美观性,可控性不 ...
- jquery 表格排序,实时搜索表格内容
jquery 表格排序,实时搜索表格内容 演示 XML/HTML Code <table class="table-sort"> <thead> < ...
- ElasticSearch做实时OLAP框架~实时搜索、统计和OLAP需求,甚至可以作为NOSQL来使用(转)
使用ElasticSearch作为大数据平台的实时OLAP框架 – lxw的大数据田地 http://lxw1234.com/archives/2015/12/588.htm 一直想找一个用于大数据平 ...
- PHP 实例 - AJAX 实时搜索-AJAX Live Search
PHP 实例 - AJAX 实时搜索 AJAX 可为用户提供更友好.交互性更强的搜索体验. AJAX Live Search 在下面的实例中,我们将演示一个实时的搜索,在您键入数据的同时即可得到搜索结 ...
- 基于Vue实现关键词实时搜索高亮显示关键词
最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github ...
- Lucene.net 实现近实时搜索(NRT)和增量索引
Lucene做站内搜索的时候经常会遇到实时搜索的应用场景,比如用户搜索的功能.实现实时搜索,最普通的做法是,添加新的document之后,调用 IndexWriter 的 Commit 方法把内存中的 ...
- Lucene系列-近实时搜索(1)
近实时搜索(near-real-time)可以搜索IndexWriter还未commit的内容,介于immediate和eventual之间,在数据比较大.更新较频繁的情况下使用.本文主要来介绍下如何 ...
- Solr -- 实时搜索
在solr中,实时搜索有3种方案 ①soft commit,这其实是近实时搜索,不能完全实时. ②RealTimeGet,这是实时,但只支持根据文档ID的查询. ③和第一种类似,只是触发softcom ...
随机推荐
- 动态树(LCT、Top Tree、ETT)
LCT Upd: 一个细节:假如我们要修改某个节点的数据,那么要先把它makeroot再修改,改完之后pushup. LCT是一种维护森林的数据结构,本质是用Splay维护实链剖分. 实链剖分大概是这 ...
- 坦克大战--Java类型 ---- (3)实现socket通信
一.实现思路 使用socket通信的一些方法来实现socket通信,客户端和服务端两边需要约定好通信的接口Port(尽量选高的),客户端需要服务端的IP地址,以实现数据交流. 同时,客户端和服务端需要 ...
- 笛卡尔树--牛客第四场(sequence)
思路: O(n)建一颗笛卡尔树,再O(n)dfs向上合并答案就行了. #define IOS ios_base::sync_with_stdio(0); cin.tie(0); #include &l ...
- spark教程(三)-RDD认知与创建
RDD 介绍 spark 最重要的一个概念叫 RDD,Resilient Distributed Dataset,弹性分布式数据集,它是 spark 的最基本的数据(也是计算)抽象. 代码中是一个抽象 ...
- tomcat启动报ClassNotFound
排除本来就缺少该类的原因,经过自己经验和网上查的资料,解决方式如下: jar包冲突(关闭其他项目) eclipse的java版本不对,点击项目,右键properties在project facets, ...
- 小程序之textarea层级最高问题
1.textarea位于底部固定定位按钮下方,会导致点击底部按钮,textarea获取到焦点. 解决方法如下 view与textarea之间在聚焦和失去焦点进行切换 cursor-spacing是te ...
- 第七篇 CSS盒子
CSS盒子模型 在页面上,我们要控制元素的位置,比如:写作文一样,开头的两个字会空两个格子(这是在学校语文作文一样),其后就不会空出来,还有,一段文字后面跟着一张图,它们距离太近,不好看,我们要移 ...
- python的加密方式
MD5加密 这是一种使用非常广泛的加密方式,不可逆的,在日常字符串加密中经常会用到,下面我简单介绍一下这种方式,主要用到Python自带的模块hashlib,测试代码如下,先创建一个md5对象,然后直 ...
- PAT Basic 1010 一元多项式求导 (25 分)
给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出. 输入格式: 测试输入包含一个测试用例,在一行内给出总长度不超过 80 的字符串.字符串由若干单词和若干空格组成,其中单词是由英文字母(大小 ...
- 多线程与UI操作(一)
C#中禁止跨线程直接访问控件,InvokeRequired是为了解决这个问题而产生的,当一个控件的InvokeRequired属性值为真时,说明有一个创建它以外的线程想访问它. 此时它将会在内部调用n ...