vue实现一个简单的自动补全

拼搏现实的明天。 2022-11-30 12:43 248阅读 0赞

结构：

<template>
        <div>
            <input v-model="searchKey" >
            <ul>
                <li v-for="(item,index) in completeData" :key="index">
                    {
       { item }}
                </li>
            </ul>
        </div>
    </template>

JS代码

export default { 
        name:'AutoComplete',
        data(){ 
            return { 
                searchKey:null, // input框输入的值，用v-model双向绑定
                dataList:['111','123','321','ab','ac','ad'], // 查询数据，一般由后端返回
                completeData:[], // 查询到的数据
            }
        },
        watch:{  // 用watch去监听 input框里面的值的变化，然后做出相应操作
            searchKey(){ 
                let searchRegex = new RegExp(this.searchKey, 'i')
                this.completeData = []  // 先把原有的数据清空，重新查询
                if(this.searchKey === '') return //如果什么都没有输入，则不用查找
                this.dataList.forEach((item) => { 
                    if(searchRegex.test(item)){ 
                        this.completeData.push(item)
                    }
                })
            }
        }
    }
    </script>

<style lang='scss' scoped>
    	// 如果想要好看一点的话，可以添加点样式~
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关实现 npm script 命令自动补全

实现 npm script 命令自动补全当 npm script 里面积累的命令越来越多时，重度命令行用户肯定会好奇，能不能实现类似 bash、zsh 里面的命令

àì夳堔傛蜴生んèń/ 2023年03月01日 10:41/ 0 赞/ 34 阅读

相关 Tab 自动补全

目录 1. 命名空间补全 2. 属性方法补全 3. 函数参数补全 4. 文件路径补全 IPython/Jupyter 提供不亚于集成开发环境的自

柔光的暖阳◎/ 2022年12月11日 07:55/ 0 赞/ 294 阅读

相关 vue实现一个简单的自动补全

结构： <template> <div> <input v-model="searchKey" > <

拼搏现实的明天。/ 2022年11月30日 12:43/ 0 赞/ 249 阅读

相关 codeblocks的代码自动补全

1.依次选择setting -> Editor，选择Code completion，按照图中进行设置 ![在这里插入图片描述][watermark_type_ZmFuZ3p

太过爱你忘了你带给我的痛/ 2022年11月16日 01:44/ 0 赞/ 663 阅读

相关 editplus的自动补全

如何使用editplus的自动补全：工具-->首选项-->文件-->文件类型及语法找到：对应的PHP/HTML/js等对应于下方的

雨点打透心脏的1/2处/ 2022年08月07日 05:42/ 0 赞/ 376 阅读

相关 Eclipse自动补全

对于编程人员来说，在编写Java程序时，要记住大量的类名及方法名实在有点太痛苦了，Eclipse提供了自动代码自动补全功能，设置方式如下：Window->Preference-

矫情吗；*/ 2022年06月15日 09:21/ 0 赞/ 457 阅读

相关 Android实现文本框自动补全

首先，我们要实现文本框的自动补全需要用到AutoCompleteTextView标签与适配器，以下为代码示例： 1.java内代码： ![Center][] 2.v

曾经终败给现在/ 2022年06月14日 03:50/ 0 赞/ 403 阅读

相关使用js实现的邮箱自动补全

1.页面代码 <input type="text" id="username" name="username" list="input_list"/> <datali

Bertha 。/ 2022年05月28日 01:42/ 0 赞/ 294 阅读

相关 springmvc实现自动补全功能

最近在做一个分享圈的项目，采用是ssm实现,于是在前端搜索框中实现一个类似百度的自动补全功能的搜索框来进行查询。思路：前端把数据传到后台，后台用springmvc接收

港控/mmm°/ 2022年05月24日 01:10/ 0 赞/ 336 阅读

相关实现Jquery的自动补全功能

摘要： > jquery有一个自动不全的插件，现在记录一下如何实现jquery的自动补全功能。话不多说，直接开始：第一步：引入支持jquery自动补全的相关插件

左手的ㄟ右手/ 2021年06月11日 15:11/ 0 赞/ 662 阅读