vue 搜索框模糊查询 + 优化(节流) + 关键字高亮

直接上代码

HTML视图层代码

<template><!-- 模糊查询 + 节流 + 高亮 --><div><inputtype="text"placehold="请输入id进行查询"v-model="inputValue"ref="input"@keyup="goSearch"/><!-- 这里v-show比v-if省性能 --><divclass="conten"v-show="isShow"><divclass="contenlist"v-for="(item,index) in list":key="index"><!-- <span>{{item.id}}</span> --><!-- <span>{{item.name}}</span> --><!-- <span>{{item.time}}</span> --><span v-html="item.id"></span><span v-html="item.name"></span><span v-html="item.time"></span></div></div>
</template>

js数据逻辑层代码：

<script>
// import _ from 'lodash'
export default {data () {return {inputValue: "",isShow: false,statu: true,dataList: [{ id: "9527", name: "刘一", time: "2020-07-10" },{ id: "9528", name: "陈二", time: "2020-08-10" },{ id: "9259", name: "张三", time: "2020-09-10" },{ id: "9277", name: "李四", time: "2020-10-10" },{ id: "1205", name: "王五", time: "2020-11-10" },{ id: "1206", name: "赵六", time: "2020-12-10" },{ id: "1307", name: "孙七", time: "2021-01-10" },{ id: "1308", name: "周八", time: "2021-02-10" },{ id: "1309", name: "吴九", time: "2021-03-10" },{ id: "1300", name: "郑十", time: "2021-04-10" }],list: []}},methods: {search () {this.list = [];this.inputValue = this.$refs.input.value;// 判断展示列表，如果输入了就展示没输入就不展示if (this.inputValue.length > 0) {this.isShow = true;} else {this.isShow = false;}this.dataList.map((item) => {// id、name、time去分别跟输入的值进行比较if (item.id.indexOf(this.inputValue) !== -1 || item.name.indexOf(this.inputValue) > -1 || item.time.indexOf(this.inputValue) > -1) {// 将当前匹配到的值添加到list数组中// this.list.push(item); // 这里需要深拷贝 下面两种方法都可以this.list.push(JSON.parse(JSON.stringify(item)));// this.list.push(_.cloneDeep(item)); // _.cloneDeep 需要下载lodash}})this.list.map((item) => {item.id = this.brightKeyword(item.id)item.name = this.brightKeyword(item.name)item.time = this.brightKeyword(item.time)})},brightKeyword (val) {const keyword = this.inputValueif (val.indexOf(keyword) > -1) {// replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。// font标签 规定文本的尺寸、字体和颜色return val.replace(keyword, `<font color='tomato'">${keyword}</font>`)} else {return val}},// 节流函数goSearch () {// 保持this的指向始终指向vue实例const that = this;if (!that.statu) {return;}that.statu = false;setTimeout(function () {console.log(new Date());that.search(); // 调用写好的方法that.statu = true;}, 1000)}}
}
</script>

css样式代码

<style lang='scss' scoped>
// 这里我用到了sass,用less也可以
.conten {margin-top: 10px;width: 300px;height: 400px;border: 1px solid pink;overflow-y: auto;.contenlist {padding: 20px;> span {padding-right: 10px;}}
}
</style>

更新一下,用computed 实现模糊查询
老规矩直接上图

<template><div><inputv-model="inputValue"@input="inputFunc"type="text"placeholder="computed模糊查询"><div v-show="isShow"><divv-for="(item,index) in searchData":key="index">{{ item.name }}</div></div></div>
</template>

逻辑代码

<script>
export default {data () {return {inputValue: "",//输入框中的内容isShow: false,//控制搜索的问题显示隐藏resData: [{ name: "大话西游之月光宝盒" },{ name: "大话西游之仙履奇缘" },{ name: "功夫" },{ name: "喜剧之王" },{ name: "武状元苏乞儿" },{ name: "食神" },{ name: "百变星君" },{ name: "逃学威龙1" },{ name: "逃学威龙2" },{ name: "逃学威龙3" },{ name: "赌圣" }]}},methods: {//监听输入事件，当input中有内容时，下面的搜索列表显示出来inputFunc () {if (this.inputValue.length > 0) {this.isShow = true;} else {this.isShow = false}}},//计算属性，当输入内容的时候下面的方法就会根据你输入的内容来过滤resData数组中的数据computed: {searchData () {// 方法一const _this = thisreturn this.resData.filter(function (item) {return Object.keys(item).some(function (key) {return String(item[key]).toLowerCase().indexOf(_this.inputValue) > -1})})return this.items;// 方法二const _this = thisconst fuzzyQueryList = []this.resData.forEach(function (item) {// map filter some 都可以if (item.name.indexOf(_this.inputValue) > -1) {fuzzyQueryList.push(item)}})return fuzzyQueryList}}
}
</script>

若对你有用,道友请点个赞

vue 搜索框模糊查询 + 优化(节流) + 关键字高亮相关推荐

搜索框模糊查询并选中
在这里插入代码片一.HTML部分二.JS板块 ```javascript data() {return {inputValue: "", //输入框中的内容isShow: fal ...
搜索引擎下拉食云速捷详细_搜索框下拉优化雀云速捷好口碑
百度下拉框推广效果到底怎么样?输入关键词,不用搜索,自动展现在最显眼的位置,您觉得是不是最直观的推广方式?很多网民的搜索习惯都是打出几个字就选择下拉位置推荐的词,是不是您也有这样的习惯? 咨询微信:y ...
easyui select选择框模糊查询以及页面引入多个版本的jquery解决办法
eaeyui版本1.4.4,下载地址 http://www.jeasyui.com/download/index.php 下拉框模糊查询例子: <%@ page language="j ...
关于小程序中地图的应用（联动搜索，模糊查询，定位导航）
小程序中地图的应用一.获取微信地址二.联动搜索及模糊查询三.导航一.获取微信地址在小程序的开发中,内置了获取微信地址的API接口.我们可以直接调用,对返回的数据进行相关的处理即可.代码如下: ...
ofice2007 没有下拉框模糊查询功能
ofice2007没有下拉框模糊查询功能另外安装一下wps2019,换着用.
html下拉菜单模糊查询,Select下拉框模糊查询功能实现代码
select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,有任何问题欢迎给我反馈. 关键代码如下所示: 可输入的下拉框 var j ...
html选择框加模糊查找,input selec下拉框模糊查询
input selec下拉框模糊查询 1.[代码][JavaScript]代码 //1 初始化时候,先将数据存入数组 var TempArr = [];// 存贮option var SelectOb ...
oracle模糊匹配优化,Oracle 模糊查询优化
(1)字段 like '%关键字%' 字段包含"关键字"的记录即使在目标字段建立索引也不会走索引,速度最慢 (2)字段 like '关键字%' 字段以&qu ...
java 搜索框快速查询_Java项目搜索功能的实现
今天是刘小爱自学Java的第110天. 感谢你的观看,谢谢你. 话不多说,开始今天的学习: 事先说明:关于今天的搜索功能实现. 并没有使用到倒排索引这样的主流搜索技术,就一个普通的模糊查询. 在此之前 ...

vue 搜索框模糊查询 + 优化(节流) + 关键字高亮

vue 搜索框模糊查询 + 优化(节流) + 关键字高亮相关推荐

最新文章

热门文章