Vue 3 实现输入框与下拉列表自动填充功能示例

在这个Vue 3示例中，我们探讨了如何在一个用户界面中实现一个结合输入框与自定义下拉列表的自动填充功能。通过结合模板（template）、脚本（script）和样式（stylescoped）部分，我们将构建一个简洁的组件，以便在用户输入时动态过滤并显示相关选项。 **1. HTML结构**: - `<template>`部分展示了基本的HTML布局。有一个`<input>`元素用于接收用户的搜索输入，其`v-model`绑定到`data`对象中的`search`属性。当用户输入时，`@input`事件触发`filterOptions`方法进行实时过滤。一个条件渲染的`<div>`（`.autocomplete-dropdown`）用于显示过滤后的选项，每个选项作为一个`.autocomplete-option`元素，点击后执行`selectOption`方法。 **2. JavaScript逻辑**: - 在`<script>`部分，我们定义了一个Vue组件，包含`data`对象，其中初始化了`search`和`options`数组。`filteredOptions`数组用于存储筛选后的选项。 - `filterOptions`方法接收用户输入的`search`值，并使用`Array.prototype.filter()`对`options`进行过滤，只保留那些`label`属性的小写包含用户输入小写的选项。 - `selectOption`方法处理用户的选择：将选中的`option`的`label`值赋给`search`，清空`filteredOptions`，并且可以在此基础上添加更多操作，如更新父组件或执行其他相关逻辑。 **3. CSS样式**: - 在`stylescoped`部分，定义了`.autocomplete-dropdown`和`.autocomplete-option`类的样式，分别用于定位下拉菜单的位置、边框、内边距以及选项的样式。 这个示例展示了Vue 3中响应式的数据绑定（`v-model`）以及如何利用事件处理程序（`@input`）和方法（`filterOptions`和`selectOption`）来实现实时搜索和下拉列表的动态行为。对于实际项目，你可能需要根据具体需求扩展组件，例如添加数据加载、错误处理或者更复杂的过滤逻辑。此外，CSS样式可以根据设计规范进行调整，以提供更好的用户体验。