vue2.0_在vue中实现input输入框的模糊查询

前言

我们要实现的一个效果是，当输入框输入值时，显示数据列表框并将检索到的数据在列表框当中做展示。

模糊查询功能原理分析

其实所谓模糊查询就是不需要用户输入完整的内容就可以开始查询，也就是说用户可以在边输入的同时看到查询到的结果，百度的搜索功能就是很好的模糊查询的例子；其实模糊查询的原理就是给输入框绑定oninput事件监听用户输入情况，然后每次用户只要在输入框中输入了内容就会触发事件并进行查询然后实时展示。

HTML部分

<input type="text" placeholder="请输入内容" v-on:input="searchCode" v-model="fundCode"/><!--模糊匹配数据列表--><ul :style="{display:showType}"><li v-for="(item,index) in matchingList" :key="index"><span> {{item.code}}</span><span>{{item.name}}</span><span>{{item.date}}</span></li></ul>

js逻辑部分

export default {name: "app",data() {return {matchingValue:[{id:1,code:'1205',name:'财务',date:20170203},{id:2,code:'3952',name:'孙空',date:20180304},{id:3,code:'5324',name:'猪八',date:20190405},{id:4,code:'1632',name:'和尚',date:20200506},],matchingList:[],showType:'none',fundCode:'',};},methods: {searchCode(){/*每次input框输入前清空一下数组，避免重复*/this.matchingList = [];/*判断输入框的值是否为空*/if(this.fundCode !== ''){/*显示数据列表*/this.showType = 'block';/*循环模拟数据的数组*/this.matchingValue.map((msg)=>{/*拿每个msg中的code去跟输入框的值做比较*//*如果在检索的字符串中没有出现要找的code就会返回-1*//*我这里写！= -1就是指找到的情况*/if(msg.code.indexOf(this.fundCode) != -1){/*如果能找到，就将对应的msg添加到新数组当中*/this.matchingList.push(msg);}})}else{this.showType = 'none';}}}}

效果

vue2.0_在vue中实现input输入框的模糊查询相关推荐

vue input只能输入正整数_前端开发：Vue中获取input输入框值的方法
在前端开发过程中,会用到各种各样的基础组件,一些常用的组件的使用方法一定要滚熟于心,对于刚入门的新手来说,对基础知识的熟练掌握很重要,如果不熟练就会影响开发速度.那么本篇博文就来分享一个比较基础的知识 ...
vue2.0_在vue中使用echarts图表插件
说明:本例子基于vue-cli脚手架搭建首先,安装echarts依赖 npm install echarts -S 注:安装NodeJS之后,使用npm来安装包使用的是国外的地址,经常会出现超时错误 ...
vue中，input输入框只允许输入数字
在vue项目中,输入框只允许输入数字,现将自己使用的一种方法记录,以供大家参考这里需用到vue修饰符不了解的同学可去vue官网看看,或者百度看看其他文档的讲解. .number 如果想自动将用户的 ...
【Vue2.0】—Vue中的key有什么作用？（四）
[Vue2.0]-Vue中的key有什么作用?(四) <div id="root"><ul><button @c ...
html限定输入的内容,HTML中限制input 输入框输入内容
限制 input 输入框只能输入纯数字 1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就 ...
HTML中input输入框动态模糊匹配
HTML中的input输入框根据后台返回的动态模糊匹配输入的内容,可以选择,也可以输入,此处是使用的是HTML5新增的标签datalist来实现,不需要插件,页面加载完时直接将后台查询到的所有值赋给d ...
在vue中获取input上传图片的宽和高
在vue中获取input上传图片的宽和高上代码思路项目中有一个需求是需要上传190px*192px的png图片,一般直接在files.input[0]里面是找不到的,所以要变个思路了. 上代码 ...
Vue+ElementUI 之 input输入框添加自定义图片
Vue+ElementUI 之 input输入框添加自定义图片效果图如图: <el-form ref="formData" :model="formData&q ...
HTML中限制input 输入框输入内容
HTML中限制input 输入框输入内容先介绍使用 oninput 事件,限制HTML中input 输入框输入内容的方式,再介绍用其它方式限制HTML中input 输入框输入内容. 只能输入纯数字的 ...

vue2.0_在vue中实现input输入框的模糊查询

前言

模糊查询功能原理分析

HTML部分

js逻辑部分

效果

vue2.0_在vue中实现input输入框的模糊查询相关推荐

最新文章

热门文章