Vue文本模糊匹配功能如何实现
模糊匹配功能在下拉菜单的组件中用的非常多，于是打算写几个demo看看细节上是如何实现的。
一、最简单的模糊匹配：计算属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<ul>
<li v-for="(option, index) in matchedOptions" :key="index">{{ option }}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: '',
options: ['html', 'css', 'javascript']
},
computed: {
matchedOptions() {
if (this.message !== '') {
return this.options.filter(option => option.includes(this.message))
}
return this.options
}
}
})
</script>
</body>
</html>
在上面的例子中，计算属性matchedOptions会在文本框内容message变化时筛选options里的数据，效果图如下所示：
二、使用作用域插槽实现
使用插槽主要是为了使该功能组件化：在select组件中插入option，然后option通过作用域插槽从select中获取文本值：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-select>
<template #default="{ message }">
<ul>
<li v-for="(option, index) in options" :key="index" v-show="option.includes(message)">{{ option }}</li>
</ul>
</template>
</my-select>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('my-select', {
template: `
<div class="my-select">
<input type="text" v-model="message">
<slot :message="message"></slot>
</div>
`,
data() {
return {
message: ''
}
}
})
new Vue({
el: '#app',
data: {
options: ['html', 'css', 'javascript']
}
})
</script>
</body>
</html>
全局注册了my-select组件后，可以删除app里的message数据，使用v-show来控制选项的显示，运行效果和计算属性方式相同。缺点就是无法单文件化（刚学vue没多久，不知道怎么在单文件里使用作用域插槽，试过直接把template里的东西封装成my-option好像并不管用）
三、混入广播和派发方法在独立组件中实现模糊匹配
首先需要一个emitter文件：
/**
* 子组件广播事件
* @param {string} componentName 子组件名
* @param {string} eventName 事件名
* @param {...any} params 事件参数
*/
function _broadcast(componentName, eventName, ...params) {
this.$children.forEach(child => {
if (child.$options.name === componentName) {
child.$emit(eventName, ...params)
}
_broadcast.call(child, componentName, eventName, ...params)
})
}
/**
* 父组件派发事件
* @param {string} componentName 父组件名
* @param {string} eventName 事件名
* @param {...any} params 事件参数
*/
function _dispatch(componentName, eventName, ...params) {
if (this.$parent) {
if (this.$parent.$options.name === componentName) {
this.$parent.$emit(eventName, ...params)
}
_dispatch.call(this.$parent, componentName, eventName, ...params)
}
}
/**
* mixin
*/
export default {
methods: {
broadcast(componentName, eventName, ...params) {
_broadcast.call(this, componentName, eventName, ...params)
},
dispatch(componentName, eventName, ...params) {
_dispatch.call(this, componentName, eventName, ...params)
}
}
}
注意，这里的$children和$parent都是指具有dom父子关系的vue组件。
最后，通过设置查询条件来控制子组件的显示与隐藏即可实现实时模糊搜索。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
浅谈vue限制文本框输入数字的正确姿势
最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现.本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷.因此自己动手,丰衣足食. 事件选型 首先我们很容易想到通过事件来达到目的,大致可以通过以下几个事件来实现: keypress/keydown 思路:按键按下的时候触发,通过判断按下的是否是数字返回true/false来限制用户的输入. 缺点:无法限制用户复制粘贴的数据.
-
vue2.0 实现富文本编辑器功能
前端富文本编译器使用总结: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.简洁.易用,但是升级到 3.x 之后,不便于定制化开发.不过作者很勤奋,广义上和我是一家人,打个call quill:本身功能不多,不过可以
-
vue 解决文本框被键盘遮住的问题
如下所示: 我把它写成了组件 主要代码是 document.getElementById(this.FullScreenId).scrollTop = document.getElementById(this.FullScreenId).scrollHeight 我这边把div满屏了看下面css就知道了 你也可以使用body,这个你行百度一下就可以了 注意点是css /* 页面满屏 */ .pageFullScreen { height: 100%; position: absolute; to
-
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil
-
vue实现页面内容禁止选中功能,仅输入框和文本域可选
上网上翻了翻,共找到两种方式 CSS样式控制,只需将下面代码复制到 vue应用下,index.html文件中的body标签上 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-se
-
Vue实现点击按钮复制文本内容的例子
点击复制功能主要通过 clipboard.js 来实现 在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下: 1.引入clipboard.js,方法如下: 第一种直接npm安装:npm install clipboard --save 第二种:<script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.
-
Vue 实现从文件中获取文本信息的方法详解
本文实例讲述了Vue 实现从文件中获取文本信息的方法.分享给大家供大家参考,具体如下: 最近在使用vue做项目的时候,遇到一个需求,界面中需要显示大量的说明文字,为了保持界面的整洁和赶紧,决定采用单独的文件来存储显示信息,然后通过文件读取的方式显示到界面上. 刚开始我使用的是File和FileReader对象获取,但是比较气人的是这两个对象是IE浏览器特有的属性,chrome不支持,而且为了安全起见,现在浏览器是不推崇这种做法的,因为很容易造成文件被外部恶意删除或增加内容,安全性太低.无奈之下,
-
在vue中利用v-html按分号将文本换行的例子
最近在开发的时候遇到这样一个需求,需要将一段文本按照分号(有中文分号和英文分号)进行换行操作. 如下: 换行前:雷军,2457.66万,自然人股东;洪锋,169.51万,自然人股东;黎万强,10.33万,自然人股东; 换行后: 雷军,2457.66万,自然人股东; 洪锋,169.51万,自然人股东; 黎万强,10.33万,自然人股东; 显示的html: <p class="bgnr-txt" v-html="change(content)"> js: m
-
Vue文本模糊匹配功能如何实现
模糊匹配功能在下拉菜单的组件中用的非常多,于是打算写几个demo看看细节上是如何实现的. 一.最简单的模糊匹配:计算属性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
-
Qt实现模糊匹配功能的实例详解
目录 1.准备基础数据 2.创建并实例化匹配类 3.控件绑定 对于浏览器的使用,我想大家一定不会陌生吧,输入要搜索的内容时,会出现相应的匹配信息. 那么,今天我要讲述的也是这样一个功能. 首先看一下展示效果 输入任意文本后,弹出具有该文本的符合项,也就是模糊查询. 实现功能的核心是:QCompleter 该类可以在任何Qt小部件中提供自动完成搜索功能,例如:QLineEdit.QComboBox.当输入指定字符后,QCompleter会根据单词列表提供的内容进行筛查. 在这里,我是采用QLine
-
正则表达式实现字符的模糊匹配功能示例
本文实例讲述了正则表达式实现字符的模糊匹配功能.分享给大家供大家参考,具体如下: package com.cn.util; import java.util.regex.Pattern; /** * 正则表达式 工具类 * * @author lifangyu */ public class RegexUtil { /* * IP地址的匹配标达式 ( // \\d{1,3}) // :\d // 0~9数字,{1,3} // 至少一位,最多三位) */ private static String
-
js实现模糊匹配功能
功能描述: 在搜索框中输入某一个字段,可以查询到相关的内容 功能实现: 1. 先声明变量用于保存输入框以及表格里面的内容 2. 循环遍历 遍历表格每一行,查找匹配项 3. 判断 如果输入框里面的内容跟表格中某个td的内容相似,则表格中的某行就显示,否则隐藏 功能实现: <html> <head> <style> #myInput { width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border
-
JQuery搜索框自动补全(模糊匹配)功能实现示例
本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考 首先贴出的是JQuery Ui 的自动补全插件部分的代码,后面的功能都是在其基础上追加的,直接拷贝到你的本地就可以直观的看到运行效果,也可以到官网上面体验和查看,为了方便,我这里是直接引入的JS链接点击下载JQuery UI的源码 <!doctype html> <html lang="en"> <
-
IOS实现邮箱模糊匹配的功能
先来看看要实现的效果图 一.介绍一下功能 当输入一个邮箱的数字,会默认在后面匹配出来@qq.com,当然这个默认@qq.com可以换成其他的如@163.com等等.这里默认是@qq.com,因为我们的产品汪做过统计大多数用户还是用的qq邮箱,所以默认是@qq.com. 当输入@符号还是不会有所变化,但是如果在@之后再输入字符,会将这个字符和你想要提示的邮箱后缀做匹配,我这里是需要匹配@qq.com,@163.com,@126.com,@yahoo.com,@139.com,@henu.com类型
-
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
本文实例讲述了jQuery简单实现的HTML页面文本框模糊匹配查询功能.分享给大家供大家参考,具体如下: 项目中需要用到此功能,使用过EasyUI中的Combobox,网上也搜过相应的解决办法,对于我的项目来说都不太合适,因为我还是喜欢比较纯粹的东西,就自己动手写了一个,比较简单,但还算能用,我的项目中也已经使用上了,做了个小demo作为记录,有需要的自己复制代码改一改就好了. 使用在线HTML/css/JavaScript运行工具:http://tools.jb51.net/code/Html
-
Vue实现输入框回车发送和粘贴文本与图片功能
目录 实现回车发送 粘贴文本 粘贴图片 总结 上一篇中,我们初步新建了一个可“双向绑定”的聊天输入框,结合实际使用的场景,如果仅仅只是实现了“双向绑定”还不够,还必须处理粘贴文字.图片等功能.本文就在此基础上,继续探讨如何实现回车发送.粘贴文本(包括HTML).粘贴图片等功能.话不多说,咱们开整.contenteditable的元素如何实现“双向绑定”? 实现回车发送 在一个可编辑元素中,默认回车就是换行.但是如果我们要实现回车是“发送”的功能,需要怎么处理呢? 思路:监听键盘事件,如果判断用户
-
javascript正则表达式模糊匹配IP地址功能示例
本文实例讲述了javascript正则表达式模糊匹配IP地址功能.分享给大家供大家参考,具体如下: function checkip() { var strIP = document.getElementById("accessip").value; var re = /^(\d{1,3}|\*)\.(\d{1,3}|\*)\.(\d{1,3}|\*)\.(\d{1,3}|\*)$/g //模糊匹配IP地址的正则表达式 if(re.test(strIP)){ if(RegExp.$1
-
Laravel5中实现模糊匹配加多条件查询功能的方法
本文实例讲述了Laravel5中实现模糊匹配加多条件查询功能的方法.分享给大家供大家参考,具体如下: 方法1. ORM模式 public function ReportAccurate($data) { if(is_array($data)) { $where = $this->whereAll($data); return $where; } else { return false; } } /*多条件模糊*/ public function whereAll($data) { $query