使用vue3+ts封装一个自动补全输入框Autocomplete组件

创建一个名为 Autocomplete.vue 的文件,在这个组件中,使用了 Vue 3 的 Composition API,包括 refwatchonMounted 等。组件接收 placeholderdebounceclearable 作为 props,并根据这些 props 来渲染输入框和下拉菜单

<template><div class="autocomplete"><inputv-model="query":placeholder="placeholder"@input="handleInput"@focus="handleFocus"@blur="handleBlur"@keydown.delete="handleClear"/><div v-if="showDropdown" class="dropdown"><divv-for="(item, index) in filteredItems":key="index"@click="handleSelect(item)">{{ item }}</div></div></div>
</template><script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue';
import axios from 'axios';interface Props {placeholder?: string;debounce?: number;clearable?: boolean;
}export default defineComponent({props: {placeholder: {type: String,default: '请输入内容'},debounce: {type: Number,default: 300},clearable: {type: Boolean,default: true}},setup(props: Props) {const query = ref('');const showDropdown = ref(false);const items = ref<string[]>([]);const filteredItems = ref<string[]>([]);const timer = ref<number | null>(null);const handleInput = () => {if (timer.value) {clearTimeout(timer.value);}timer.value = setTimeout(fetchData, props.debounce);};const handleFocus = () => {showDropdown.value = true;};const handleBlur = () => {setTimeout(() => {showDropdown.value = false;}, 200);};const handleClear = () => {if (props.clearable) {query.value = '';showDropdown.value = false;}};const handleSelect = (item: string) => {query.value = item;showDropdown.value = false;};const fetchData = async () => {if (query.value.length > 0) {try {const response = await axios.get(`/api/search?query=${query.value}`);items.value = response.data.items;filteredItems.value = items.value.filter(item =>item.toLowerCase().includes(query.value.toLowerCase()));showDropdown.value = true;} catch (error) {console.error(error);}} else {showDropdown.value = false;}};onMounted(fetchData);watch(query, fetchData);return {query,showDropdown,filteredItems,handleInput,handleFocus,handleBlur,handleClear,handleSelect};}
});
</script><style scoped>
.autocomplete {position: relative;width: 300px;
}input {width: 100%;padding: 8px;box-sizing: border-box;
}.dropdown {position: absolute;width: 100%;border: 1px solid #ccc;background-color: #fff;z-index: 100;max-height: 200px;overflow-y: auto;
}.dropdown div {padding: 8px;cursor: pointer;
}.dropdown div:hover {background-color: #f0f0f0;
}
</style>

关注微信公众号温暖前端,不定期分享前端知识点和前端资料↓↓↓

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24731.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图论第7天

今天去打了会羽毛球。最近还是有点累啊&#xff0c;今天尽量效率 1971. 寻找图中是否存在路径 第一步是先整init 第二步先把该关联的关联 第三步判断是否有路 class Solution { private:int nMax 200005;vector<int>father vector<int>(nMax,0);void init(i…

【Linux】进程间通信之匿名管道

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

TypeScript未知泛型——unknown和any

在 TypeScript 中&#xff0c;如果你想要表示一个泛型变量&#xff0c;但你不知道或不关心它具体是什么类型&#xff0c;你可以使用 any 类型。然而&#xff0c;any 类型会绕过类型检查&#xff0c;这可能不是你想要的。为了保持类型安全性&#xff0c;TypeScript 提供了一个特…

Day50 动态规划part09

LC198打家劫舍 偷前一家或者偷前两家和这家&#xff1a;dp[i] Math.max(dp[i-2]nums[i],dp[i-1]);代码 LC213打家劫舍II&#xff08; 未掌握&#xff09; 解题思路&#xff1a;因为成环了&#xff0c;所以首位元素一定是两者只能选择一个或者两者都不选三种情况&#xff1…

四舍五入问题

单纯输出四舍五入可以用 printf("%.nf",num); 但是这个方法有时候会出错 代表输出n位四舍五入小数 而将数四舍五入赋值给变量可以用round&#xff08;&#xff09;函数 a round(num); 表示将num四舍五入赋值给a 但是这么些只能转换位四舍五入的整数 可以改…

【学习笔记】Windows GDI绘图(十一)Graphics详解(下)

文章目录 Graphics的方法Graphics.FromImageSetClip设置裁切区域IntersectClip更新为相交裁切区域TranslateClip平移裁切区域IsVisible判断点或矩形是否在裁切区域内MeasureCharacterRanges测量字符区域MeasureString测量文本大小MultiplyTransform矩阵变换 Graphics的方法 Gr…

【雷丰阳-谷粒商城 】【分布式基础篇-全栈开发篇】【07】【商品服务】分页查询_品牌分类关联与级联更新

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式基础篇-全栈开发篇】【07】【商品服务】分页查询_品牌分类关联与级联更新 分页查询为数据库表设计冗余字段冗余字段带来的问题以及处理品牌名发生变化&#xff0c;进行级联更新分类名发生变化&#xff0c;进行级…

SQL语句练习每日5题(四)

题目1——查找GPA最高值 想要知道复旦大学学生gpa最高值是多少&#xff0c;请你取出相应数据 题解&#xff1a; 1、使用MAX select MAX(gpa) FROM user_profile WHERE university 复旦大学 2、使用降序排序组合limit select gpa FROM user_profile WHERE university 复…

css系列:进度条

前言 技术来源于需求&#xff0c;近期遇到了做语音的需求&#xff0c;有个调整语速和音量的进度条&#xff0c;UI组件库的进度条大部分不支持拖动和点击修改当前进度&#xff0c;所以自己手写了一个。 实现思路 MDN文档介绍 <input type"range"> - HTML&am…

二叉树的前序便利,中序遍历,后序遍历

前序遍历&#xff1a; 递归&#xff1a; class Solution { public:void preorder(TreeNode *root, vector<int> &res) {if (root nullptr) {return;}res.push_back(root->val);preorder(root->left, res);preorder(root->right, res);}vector<int> …

解决 make_ext4fs is not find, it is recommanded to install android-tools-fsutils

编译cluster linux时&#xff0c;遇到make_ext4fs命令无法找到。这个工具是被软件包 android-tools-futils 包含的。这个软件包只支持18.04的系统&#xff0c;在ubuntu20.04和ubuntu22.04上&#xff0c;无法被正确的安装。会报依赖问题&#xff0c;报错的信息是依赖python相关的…

Java中的IO流字节流(FileOutputStream与FileInputStream)+编码与解码

目录 ​编辑 IO流 File0utputstream FileOutputstream写数据的3种方式 void write(int b) 一次写一个字节数据 void write(byte[] b) 一次写一个字节数组数据 void write(byte[] b,int off,int len) 一次写一个字节数组的部分数据 FileOutputstream写数据的…

搞编程学习时是如何查找资料的?

刚开始学编程时&#xff0c;我通常用百度、360这样的搜索引擎去找资料。但后来我发现&#xff0c;根据想找的东西不同&#xff0c;用的搜索地方也得变。比如说&#xff0c;找编程学习的东西&#xff0c;我就不太用浏览器了&#xff0c;因为那儿广告太多&#xff0c;信息乱七八糟…

问题:军保卡不允许开立附属卡,不能开展境外交易,不开通云闪付工功能() #其他#经验分享

问题&#xff1a;军保卡不允许开立附属卡&#xff0c;不能开展境外交易&#xff0c;不开通云闪付工功能&#xff08;&#xff09; A&#xff0e;A&#xff1a;正确 B&#xff0e;B&#xff1a;错误 参考答案如图所示

C++STL初阶(3):string模拟实现的完善

1.流提取>>的优化&#xff08;利用缓存区的思想&#xff09; istream& operator>>(istream& is,string& str) {str.clear();char c;c is.get();while (c ! \0 && c ! \n) {str c;c is.get();}return is; } 在上文的对string的实践中&#…

blazehttp下载安装和自动化测试防护效果

blazehttp下载安装和自动化测试防护效果 说明测试环境的准备网站和waf配置blazehttp下载安装和测试测试效果waf安全日志查看 说明 需要docker环境和1panel面板 本测试使用blazehttp南墙waf进行测试&#xff0c;有兴趣的同学推荐使用雷池waf 测试环境的准备 使用1panel面板&am…

为什么会有虚像

本来我就打算写虚像相关的内容&#xff0c;实际上我看不懂光学的内容&#xff0c;我只是发觉书上没有使用变分法来做&#xff0c;而只是解析几何的变换&#xff0c;这个做法完全脱离实际&#xff0c;物理书为什么会这样写不知道原因&#xff0c;但是很明显这样的内容也非常的复…

docker基础,docker安装mysql,docker安装Nginx,docker安装mq,docker基础命令

核心功能操作镜像 Docker安装mysql docker run -d --name mysql -p 3306:3306 -e TZAsia/Shanghai -e MYSQL_ROOT_PASSWORDlcl15604007179 mysql docker的基本操作 docker rm 容器名称即可 docker ps 查看当前运行的容器 docker rm 干掉当前容器 docker logs 查看容器命令日…

瑞安面试分享

瑞安面试分享 面试时间&#xff1a;07/06/2024 方式&#xff1a;在线zoom&#xff0c;雇主会发面试链接&#xff0c;提前进入准备 瑞安招前端和后端开发&#xff0c;我面的是偏数据库设计的后端开发 问题1&#xff1a;自我介绍 寒暄后开始自我介绍&#xff0c;如果是后端就…

Golang:bytes 格式和解析数字字节值(10K、2M、3G等)

bytes 格式和解析数字字节值(10K、2M、3G等) 文档 https://github.com/labstack/gommon/tree/master/bytes 安装 go get github.com/labstack/gommon/bytes代码示例 格式化 bytes.Format(13231323) // 12.62MiB解析 b, _ : bytes.Parse("2M") // 2000000完整代…