vue模糊查询
模糊查询匹配结果
<!-- 搜索框 -->
<div class="search-wrapper">
<input type="text" placeholder="中文/拼音/首字母" @keyup="autoInput()"/>
</div>
<!-- 搜索结果 -->
<div class="auto-list-con" v-if="autoIsShow">
<div class="list-name" v-for="item in autoData" @click="selectCityName(item.sta_name)">{{item.sta_name}}
</div>
</div>
autoInput(){//输入框搜索
const str=event.target.value.toLocaleLowerCase().replace(/\s/g,"");//搜索字符串去空格
this.autoData.length=0;
this.autoIsShow=true; if(str===''){//如果为空,不展示搜索结果面板
this.autoIsShow=false;
return;
}
this.Stations.forEach((item,index)=>{ //模糊匹配
const name=item.sta_name;
const ename=item.sta_ename || 's';
if(name.indexOf(str)>=0||ename.indexOf(str)>=0){
this.autoData.push(item);
}
})
if(this.autoData.length===0){
this.autoData.push({sta_name:"暂不支持该城市"});
}
}
vue模糊查询的更多相关文章
- vue实现输入框的模糊查询(节流函数的应用场景)
上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到 ...
- vue+vuex项目中怎么实现input模糊查询
1,首先给input框添加方法,但是用的是element-ui的组件,对input进行了封装,不能直接用原生的方法!,在element组件中,input框中方法有实例参数$event,代表事件对象 ...
- vue 如何实现 Input 输入框模糊查询方法
原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item, ...
- vue实现input输入框的模糊查询
最近在用uni-app做一个项目,使用的框架还是vue,想了好久才做出来 . HTML代码部分 <input type="text" focus class="s ...
- 个人笔记之json实现模糊查询
1:首先创建一个项目如:(说明:此项目是在eclipse创建的) 2.在创建相对应的包如: 3.创建写好相对应的配置文件如: applicationContext.xml具体内容如下: <?xm ...
- input动态模糊查询的实现方式
最近在用jQuery实现动态模糊查询的时候,找了挺久都没有找到像Vue.js的watch属性这么好用的动态模糊查询方法.就分享一下目前遇到的坑和可以实现动态查询的几种方式. 1.jQuery的chan ...
- 17_Vue列表过滤_js模糊查询
列表过滤 需求分析 这里呢有张列表,假设这个列表有一百多条数据 当我在这个 搜索框当中 搜索 单个关键字的时候 (冬,周,伦),它能把带了这几个关键字的信息都给我罗列出来 === 跟数据库的 模糊查询 ...
- Mybatis框架的模糊查询(多种写法)、删除、添加(四)
学习Mybatis这么多天,那么我给大家分享一下我的学习成果.从最基础的开始配置. 一.创建一个web项目,看一下项目架构 二.说道项目就会想到需要什么jar 三.就是准备大配置链接Orcl数据库 & ...
- js—模糊查询
首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串. 以下例 ...
随机推荐
- Laravel Eloquent ORM--整理(未转)
转:http://blog.csdn.net/a437629292/article/details/46312695 http://www.jianshu.com/p/cb641a4f3599
- 【ActiveMQ】ActiveMQ在Windows的安装,以及点对点的消息发送案例
公司最近会用MQ对某些业务进行处理,所以,这次我下载了apache-activemq-5.12.0-bin把玩下. 基于练习方便需要,使用Windows的版本. 参考的优秀文章: activemq的几 ...
- 【鉴别】日版iPhone如何通过IMEI查询运营商
SoftBank.au.docomo是日本的三大运营商,以前日本不同运营商的iPhone在型号上进行区分,但iPhone5s/5c上三个运营商的型号都一致,所以无法在型号上对运营商进行区分,本文介绍通 ...
- iPhone4 降级6.12教程 无须SHSH 不装插件 不睡死[转载] by 轻鸢
无shsh降级电脑系统,细节操作等其它影响因素较多,不确保每个人都能成功,楼主发帖前刷机几十次均成功.步骤有些繁琐,按照步骤每一步都正确可保证最后不睡死 注意一下,无SHSH降级都是不完美的,开机需要 ...
- iOS中的动画(转载)
iOS中的动画 最近两天没事在慢慢学习一些动画,好多东西长时间不用都给忘了,找到一篇介绍很详细的文章就粘贴了过来以备复习,原文地址:https://my.oschina.net/aofe/blog/ ...
- 基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
- lua工具库penlight--03字符串
字符串提取函数 这些方法也是从Python借鉴来的,但索引从1开始.stringx定义了一些函数如isalpha和isdigit, 用来判断字母和数字:startswith和endswith可以方便用 ...
- 超赞的lua开发工具zerobrane
zerobrane是用lua和wxWidgets编写的ide,而且是跨平台的,支持多种lua解释器,包括love2d. 而且最赞的是支持即时编程,可以在运行时直接修改变量,直接看到结果,不用重新运行, ...
- Mybatis Batch 批量操作
Mybatis Batch 批量操作 http://www.blogjava.net/diggbag/articles/mybatis.html
- oozie4.3.0的安装与配置 + hadoop2.7.3
安装步骤 mysql的配置 oozie的安装 oozie的配置 oozie的启动与登录 常用oozie的命令 1. mysql的配置 mysql的安装自行解决,然后在mysql上 创建oozie数据库 ...