vue手动实现输入框模糊查询

主要方法

数组过滤方法：filter

主要思路

在输入内容的同时，显示下拉候选项，并获取点击项的值，赋值给输入框。
候选项的显示与隐藏：
1. 输入框的值改变时显示
2. 点击候选项后隐藏
3. 点击候选项之外的地方隐藏候选项

效果

完整代码

<template><div><inputtype="text"class="inp"@input="getWord"v-model="inputVal"/><div class="words" v-show="isShow"><divclass="item"v-for="(item, index) in words":key="index"@click="getItem($event)">{{ item }}</div></div></div>
</template>

export default {data() {return {inputVal: "",isShow: false,words: [],//候选词。可以和后端交互，由后端返回list: ["熬清守谈","熬清守淡","熬清受淡","冰清玉粹","冰清水冷","冰洁清","冰洁玉清","闭壁清野","观者清","冰清玉润","冰清玉洁","蜂绝风清","缠夹不清","词清讼简","欢鲜清","维风清声","推陷廊清","澄清天下","激底澄清","才高气清","杜清源","冬温夏清","戴清履浊","独清独醒"," 当局者迷，观者清","耳根清净",],};},mounted() {// 候选词框外点击，隐藏候选框document.addEventListener("click", (e) => {if (e.target.className !== "words") {this.isShow = false;}});},methods: {// 数组模糊过滤getWord() {this.words = this.list.filter((item) => {return item.includes(this.inputVal);});if (this.words.length) {this.isShow = true;}},// 选中当前getItem(e) {this.inputVal = e.target.innerText;this.isShow = false;},},
};

.inp {width: 150px;height: 18px;outline: none;border: 1px solid #d0d0d0;border-radius: 3px;padding: 3px;
}
.words {width: 150px;height: 150px;overflow-y: scroll;box-shadow: 1px 1px 10px 0.5px #d0d0d0;
}
.item {font-size: 12px;height: 20px;line-height: 20px;padding: 3px 5px;
}
.item:hover {background-color: rgb(245, 214, 218);
}

vue手动实现输入框模糊查询相关推荐

vue实现input输入模糊查询(三种方式)
vue实现input输入模糊查询(三种方式) 目录 vue实现input输入模糊查询(三种方式) 1 计算属性实现模糊查询演示: 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询演示 ...
如何使用vue实现搜索输入框实时查询显示
一.需求问题在vue的项目中,经常会遇到搜索输入框的需求.当我们未输入内容,搜索输入框下面不显示内容.当我们输入内容以后,搜索输入框会实时显示,下面会实时显示搜索出来的内容.这个需求也是比较常见的. ...
uniapp H5端使用 google 地图 @googlemaps/js-api-loader，文字地点模糊查询，地点省市区详细数据，经纬度信息，markers地图标记点
不想看过程的直接在最下方下载完整代码即可先上效果图项目中引入 npm install @googlemaps/js-api-loader npm install @googlemaps/js-ap ...
html搜索框模糊搜索,前端js模糊搜索（模糊查询）
1.html结构: /*查询结果放ul里面*/ 2.css样式: #searchShop { line-height: 28px; text-indent: 5px; width: 180px; fl ...
vue2.0_在vue中实现input输入框的模糊查询
前言我们要实现的一个效果是,当输入框输入值时,显示数据列表框并将检索到的数据在列表框当中做展示. 模糊查询功能原理分析其实所谓模糊查询就是不需要用户输入完整的内容就可以开始查询,也就是说用 ...
vue下拉框可输入关键字进行模糊查询
vue下拉框可输入关键字进行模糊查询在<el-select>中,加上 filterable 即可(v-model.trim:是过滤输入的空格),clearable:输入框带清空输入内容的 ...
vue 搜索框模糊查询 + 优化(节流) + 关键字高亮
直接上代码 HTML视图层代码 <template><div><inputtype="text&quo ...
vue 带全选和多选的表格怎么写_vue实现下拉列表多选全选以及模糊查询的vue组件...
vue实现下拉列表多选全选以及模糊查询的vue组件发布时间:2018-09-12 17:41, 浏览次数:3776 , 标签: vue <>前端,有时有这样的需求,需要一个下拉列表,还要 ...
vue的模糊查询和下拉菜单修改信息------------学习记录
HTML代码<div id="box"> <div id="myModal" class="modal hide fade" ...

vue手动实现输入框模糊查询

主要方法

主要思路

效果

完整代码

vue手动实现输入框模糊查询相关推荐

最新文章

热门文章